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从 互联 网 诞生 那天 起 ,互联 网 技术 的 进步 和 应 用 就 从 未 放 慢 发 展 的 脚步 。 最 近 几 年 ,网 
络 基 础 设施 建设 日 益 完善 ,Wi-Fi 更 加 普及 ,网 络 资源 及 应 用 增长 迅猛 ,智能 手机 与 移动 应 
用 发 展 迅速 ,新 的 概念 和 应 用 不 断 涌 现 ,网 络 应 用 已 经 深入 人 心 。 与 此 同时 , 几 年 来 ,我 对 教 
育 的 理解 ,对 高 等 教育 人 才 培 养 、 对 课程 和 教师 的 责任 也 在 不 断 地 进行 反思 ,一 种 新 的 教学 
理念 日 趋 成 熟 , 就 是 在 课程 教学 中 教师 要 做 到 : 从 知识 传授 到 能 力 培养 和 素养 形成 的 转变 ， 
每 门 课 都 应 为 学 生 的 素养 形成 做 出 贡献 。 为 此 ,定位 于 专业 基础 课 和 通 识 类 教育 教材 的 
《Web 技术 导论 》 又 到 了 修订 的 时 候 了 。 

回顾 本 书 的 写作 初衷 和 2005 年 2 月 的 第 一 次 出 版 ,十 多 年 过 去 了 ,虽然 互联 网 的 应 用 

已 经 今 非 背 比 ,但 令 人 欣慰 的 是 ,本 书 以 B/S 三 层 架 构 为 主线 的 知识 结构 设计 ,显示 出 了 强 
大 的 生命 力 , 表 明了 这 种 结构 的 科学 性 和 合理 性 , 它 始终 是 我 们 认识 互联 网 、 进 行 互 联网 开 
发 与 应 用 的 思维 主线 。 在 学 习 的 过 程 中 ,没有 什么 比 思想 的 升华 和 思维 的 感悟 更 令 人 快乐 
了 ,这 些 年 来 ,对 互联 网 技术 的 咀嚼 ,让 我 们 汲取 着 技术 的 营养 和 滋润 ,也 慢 慢 地 体会 到 互联 
网 技术 的 美好 。 

光阴 芷 茧 ,从 (Web 技术 导论 (第 3 版 )) 出 版 到 现在 ,一 晃 又 是 五 年 。 在 我 的 课堂 教学 
和 Web 系统 研发 中 ,对 Web 系统 的 认识 不 断 深入 。 特 别 是 对 Web 研发 中 的 许多 技术 问 
题 , 有 了 新 的 体会 ,对 互联 网 应 用 创新 有 了 新 的 感悟 ,也 恰 逢 “互联 网 十 ”这样 一 个 时 代 背 景 ， 
我 应 该 把 这 些 新 的 东西 写 出 来 ,和 大 家 分 享 ,希望 哪怕 是 一 点 点 思路 和 想法 对 你 的 学 习 和 工 
作 有 所 启发 和 帮助 ,都 会 令 我 获得 很 大 的 欣慰 。 

本 次 改版 最 大 的 考虑 就 是 突出 重点 ,对 于 实用 性 弱 的 内 容 , 加 强 思想 凝练 ,减少 篇 幅 。 
例如 ,对 于 Web 服务 .XML 技术 ,重点 讲解 思想 ， 人 对 于 HTML ,将 
增加 HTML5 内 容 的 讲解 ,突出 CSS 等 重点 应 用 。 另 外 ,对 数据 库 SQL 语言 ,客户 端 编程 、 
服务 端 编程 ,设计 的 代码 案例 更 加 突出 实用 ,强调 代码 质量 ,对 那些 没有 实际 应 用 背景 .纯粹 
的 语法 例子 代码 进行 了 删 减 。 

本 次 改版 仍 分 为 6 章 , 主 要 内 容 如 下 。 

第 1 章 Web 基 础 。 介 绍 Internet 的 产生 和 发 展 ,万 维 网 的 概念 ,HTTP 通信 原理 ,以 
及 Web 应 用 的 概念 。 介 绍 Web 相关 核心 技术 ,包括 Java 技术 .XML 技术 、Web 服务 等 。 
介绍 计算 机 应 用 模式 的 演变 ,讲解 C/S 架构 和 B/S 架构 的 思想 和 结构 。 

第 2 章 Web 服务 器 的 架设 和 管理 。 介绍 Web 服务 器 的 概念 Web 服务 器 的 功能 。 
主要 讲解 Windows 服务 器 中 IIS 的 配置 和 管理 ,讲解 Apache 和 Tomcat 的 功能 以 及 它们 的 
关系 ,Apache 和 Tomcat 的 架设 和 管理 ,讲解 虚拟 主机 和 虚拟 目录 的 概念 及 其 配置 方法 。 

第 3 章 标记 语言 HTML 基础 。 讲 解 标记 语言 思想 ,然后 详细 介绍 HTML 标记 语言 
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的 语法 ,对 CSS 技术 、 图 层 进行 了 深入 讲解 ,并 安排 了 大 量 的 例子 解释 相关 标记 的 含义 和 使 
用 。 对 可 扩展 标记 语言 XML 的 思想 .XML 和 HTML 的 本 质 区 别 做 了 简单 介绍 。 

第 4 章 网 页 设计 与 制作 。 网 页 作为 Web 应 用 的 主要 用 户 界面 ,在 HTML 基础 上 ,加 
强 了 网 页 设计 的 讲解 ,包括 : 页 面 功能 与 内 容 设 计 、 页 面 布局 设计 、 页 面 视觉 设计 以 及 页 面 
效果 设计 等 。 介 绍 了 相关 的 开发 工具 ,包括 SublimeText 代码 编辑 器 , MyEclipse 集成 开发 
环境 以 及 Dreamweaver 页 面 制作 工具 。 

第 5 章 ”客户 端 编程 。 首 先 讲解 Web 浏览 器 的 基本 工作 原理 ,然后 讲解 客户 端 脚 本 程 
序 设计 语言 JavaScript 浏览 器 对 象 模 型 BOM HTML 文档 对 象 模型 DOM 等 内 容 ,AJAX 
技术 ,以 及 JavaScript 库 jQuery 等 。 通 过 三 个 综合 案例 ,详细 讲解 了 JavaScript 中 菜单 的 实 
现 、 表 单数 据 的 有 效 性 验证 、 表 单数 据 的 处 理 等 问题 。 这 些 综合 案例 中 包含 了 许多 Web 开 
发 中 所 需要 的 代码 ,相信 通过 这 些 案例 的 学 习 , 对 你 的 Web 开发 能 力 会 有 所 帮助 。 

第 6 章 ”服务 端 编程 。 介 绍 了 互联 网 中 Web 应 用 系统 的 概念 ,讲解 了 B/S 三 层 结构 、 
客户 端 与 服务 端 编 程 . 字 符 编码 、 网 络 攻 击 与 信息 安全 等 重要 问题 。 讲 解 了 Java 程序 设计 
语言 基础 ,包括 Java 技术 的 特点 、 类 与 对 象 , 接 口 、 包 等 基本 概念 ,介绍 了 JavaBean、Servlet 
服务 器 程序 的 概念 ,这 些 概 念 是 开展 基于 Java 技术 的 服务 端 编程 的 基础 。 重 点 讲解 了 JSP 
技术 和 数据 库 编程 。 在 本 次 修订 中 ,删除 了 原 有 占用 较 大 篇 幅 的 综合 案例 ,增加 了 Web 系 
统 设计 与 开发 一 节 , 介 绍 了 Web 系统 开发 的 基本 流程 ,相关 文档 结构 及 软件 工具 。 

笔者 作为 互联 网 用 户 和 Web 技术 的 开发 者 ,实践 者 ,同时 作为 一 名 学 院 派 和 公司 派 相 
结合 的 高 校 教师 , 希望 这 本 书 的 知识 结构 和 内 容 对 于 读者 了 解 Internet 和 WWW, 学 习 
Web 系统 开发 ,进行 Web 编程 ,以 及 提高 Web 应 用 水 平等 能 有 所 帮助 。 也 希望 书 中 的 大 量 
实例 在 读者 未 来 的 Web 研发 中 ,能 给 读者 的 编程 以 启发 ,为 读者 节省 宝贵 的 项 目 研 发 时 间 。 
软件 开发 是 一 个 积累 的 过 程 , 让 我 们 一 起 在 这 种 积累 中 进步 ,来 享受 成 功 的 乐趣 。 

在 本 书 的 写作 过 程 中 ,非常 感谢 我 的 同事 巩 裕 伟 老 师 、 焦 文江 老师 . 杨 兴 强 老 师 . 阅 铮 老 
师 和 李 蕴 老师 的 工作 及 提出 的 建议 与 意见 ,感谢 使 用 本 书 的 众多 高 校 任课 老师 对 本 书 的 认 
可 及 对 本 书 修订 提出 的 建议 与 意见 ,感谢 我 的 学 生 王 洪 岩 、 候 明 良 、 罗 琦 . 刘 义 明 、 苏 雪 、 常 路 
峰 、 崔 旭 、 朱 岩 、 田 容 雨 , 张 会 昌 \ 卢 艳 萍 、 田 韶 存 等 ,他们 都 参与 了 许多 项 目的 研发 工作 ,编写 
了 大 量程 序 代码 ,祝愿 他 们 在 以 后 的 工作 和 生活 中 一 切 顺 利 , 取 得 更 大 的 成 绩 。 此 外 ,还 要 
感谢 山东 大 学 本 科 生 院 、 山 东 大 学 研究 生 院 的 立项 支持 ,感谢 教育 部 全 国 高 校 教师 网 培 中 心 
对 本 书 的 厚爱 ,感谢 清华 大 学 出 版 社 付 弘 宇 编辑 长 期 以 来 对 本 书 的 辛勤 付出 。 

由 于 本 书 涉及 的 内 容 非 常 广泛 ,在 深度 和 广度 上 很 难 做 到 完美 ,同时 ,也 由 于 作者 本 人 
的 知识 面 和 精力 有 限 , 书 中 肯定 存在 错误 和 不 足 , 敬 请 各 位 同行 和 读者 批评 指正 。 

本 书 的 配套 课件 等 相关 资源 可 以 从 清华 大 学 出 版 社 网 站 www. tup. com. cn 下 载 , 在 本 
书 或 课件 的 下 载 使 用 中 遇 到 任何 问题 ,请 联系 fuhy@tup. tsinghua. edu. cn。 作 者 Email 
hxw@ sdu. edu. cn。 
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第 1 章 Web 基础 





【本 章 导 读 】 

20 世纪 中 期 ,在 人 类 发 展 的 历史 上 ,人 们 发 明了 互联 网 。 这 是 一 项 可 以 和 18 世纪 后 期 
的 蒸汽 机 相提并论 的 伟大 发 明 , 它 开启 了 人 类 发 展 的 新 时 代 。 今 天 ,互联 网 就 像 空气 一 样 正 
在 渗入 到 我 们 生活 的 每 一 个 角落 , 它 不 断 地 改变 着 我 们 的 工作 生活、 娱乐 ,甚至 思维 方式 。 
通过 Internet, 人 们 不 仅 可 以 上 网 浏览 网 页 、 收 发 电子 邮件 、 上 网 聊天 、 观 看 在 线 电影 \ 网 上 
购物 以 及 从 事 各 种 电子 商务 活动 ; 同时 , 随 着 B/S 应 用 模式 的 发 展 ,互联 网 技术 也 彻底 改变 
了 我 们 传统 的 计算 机 应 用 和 开发 模式 ,使 企业 、 政 府 机 构 传统 的 计算 机 应 用 系统 部 团 到 互联 
网 上 ,彻底 改变 着 人 们 的 工作 方式 。 

本 章 首先 介绍 了 互联 网 和 万 维 网 的 概念 ,讲解 了 万 维 网 中 Web 服务 器 、Web 客户 机 的 
概念 ,讲解 了 HTTP 协议 以 及 Web 服务 器 和 Web 客户 机 的 通信 原理 , 它 是 万 维 网 工作 的 
基础 ,也 是 进行 Web 服务 器 配置 .学 习 HTML 标记 语言 .进行 Web 系统 开发 的 概念 基础 。 
然后 ,对 万 维 网 中 的 常用 概念 进行 了 介绍 ,同时 还 简要 介绍 了 Internet 中 的 核心 技术 ,最 后 
对 计算 机 应 用 模式 的 发 展 ,浏览 器 /服务 器 (B/S) 三 层 结构 ,网 云 . 云 计算 、 云 服务 及 相关 技 
术 和 应 用 ,语义 Web 等 进行 了 介绍 。 

【知识 要 点 】 

1.1 节 : 中 央 控 制式 网 络 ,分 布 式 网 络 ,ARPA,ARPA 网 ,互联 网 (Internet) 。 

1.2 节 : 万 维 网 ,Web 服务 器 , Web 浏览 器 ,Web 工作 原理 ,HTTP 协议 。 

1.3 节 : 网 站 ,Web 应 用 ,主页 (首页 ), 超 文本 , 超 链接 ,统一 资源 定位 符 (URL), 端 口 ， 
二 微 码 ,博客 (Blog) , 微 博 (MicroBlog) ,RSS 订阅 , 微 信 (WeChat) 。 

1.4 节 : 标记 语言 ,标准 通用 标记 语言 (SGML) , 超 文本 标记 语言 (HTML) ,可 扩展 标 
记 语 言 (XML) ,Java 技术 ,Web 服务 。 

1.5 节 : 集中 式 计算 ,C/S 计算 机 应 用 模式 ,B/S 计算 机 应 用 模式 ,网 云云 服务 ,内 容 分 
法 网 络 (CDN) ,分 布 式 计算 ,计算 机 集群 ,负载 均衡 ,虚拟 化 技术 , 云 计 算 , 语 义 Web。 


1.1 Internet 的 产生 与 发 展 


1946 年 ,第 一 台电 子 计算 机 “* 爱 尼 亚 克 ”(ENIAC) 在 美国 宾夕法尼亚 大 学 莫 尔 电子 工程 
学 院 诞生 。 这 种 计算 技术 的 革命 透 出 了 数字 信息 时 代 的 第 一 缕 曙 光 。 随 后 , 微 电 子 技术 和 
计算 机 技术 的 发 展 日 新 月 异 , 计 算 机 应 用 日 益 广泛 。 为 了 进一步 提高 计算 机 的 使 用 效率 ,人 
们 需要 将 不 同 的 计算 机 连接 起 来 ,传递 数据 ,共享 资源 ,计算 机 之 间 的 互联 , 即 计算 机 网 络 诈 
生 了 。 在 计算 机 网 络 的 发 展 中 ,20 世纪 60 年 代 末 , 随 着 APPA 网 络 的 研发 ,计算 机 进入 网 
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络 互联 时 代 , 即 互联 网 (Internet) 时 代 。 
1.1.1 ARPA 与 ARPA 网 


1957 年 10 月 5 日 ,在 前 苏联 的 拜 科 努 尔 航天 中 心 ,人 类 历史 上 的 第 一 颗 人 造 地 球 卫 星 
Sputnik? 被 送 入 太空 。 在 冷战 阴云 笼罩 的 20 世纪 50 年 代 , 这 意味 着 在 争霸 全 球 的 竞赛 
中 ,苏联 人 已 经 先行 一 步 。 消 息 传 来 ,美国 举国 震惊 。 在 随后 召开 的 记者 招待 会 上 ,当时 的 
美国 总 统 艾森豪威尔 公开 表达 了 对 国家 安全 和 科技 水 平 的 严重 不 安 。2 个 月 后 ,美国 总 统 
向 国会 提出 了 建立 国防 高 级 研究 项 目 署 的 计划 ,并 随即 得 到 美国 国会 的 批准 。 

1958 年 2 月 ,美国 国防 部 高 级 研究 项 目 署 (Advanced Research Projects Agency,ARPA) 成 
立 , 地 点 就 设 在 美国 国防 部 五 角 大 楼 内 ,其 目标 是 负责 前 脆性 科研 项 目的 开发 ,帮助 创造 革 
命 性 新 技术 ,以 确保 美国 在 诸多 技术 领域 上 的 绝对 领先 。 新 生 的 “ 阿 帕 " 随 即 获得 了 2 亿 多 
美元 的 项 目 总 预算 经 费 。 

ARPA 成 立 后 , 便 邀 请 物理 学 .材料 学 .信息 技术 和 其 他 领域 的 顶尖 专家 加 入 这 个 机 
构 ,然后 给 予 他 们 大 量 的 资金 和 充分 的 自由 。ARPA 成 立 初期 的 研究 重点 主要 集中 在 火 
箭 、 宇 宙 空 间 探 索 .弹道 导弹 防御 以 及 核 试 验 的 探测 等 方面 ,直到 后 来 才 逐 渐 扩 大 了 研究 
范围 。 

1. 计算 机 网 络 的 萌 左 

最 早 的 计算 机 网 络 并 非 产生 于 ARPA。20 世纪 50 ,60 年 代 , 世 界 处 于 美 苏 两 大 阵营 的 
冷战 时 期 ,东西 方 阵营 对 彼此 的 技术 发 展 高 度 敏感 , 心 存 戒 心 ,美国 甚至 担心 苏联 的 飞机 会 
绕道 北极 ,空袭 美国 本 土 。1951 年 ,美国 MIT 林肯 实验 室 2 受 美国 空军 委托 ,开始 专门 研究 
针对 苏联 空袭 的 防范 措施 ,一 个 重要 的 研究 项 目 就 是 为 美国 空军 设计 半自动 地 面 防空 系统 
(Semi-Automatic Ground Environment,SAGE)。 该 系统 的 任务 是 : 通过 部 署 在 美国 北部 
边境 的 警戒 雷达 ,将 天 空中 飞机 目标 的 方位 、 距 离 和 高 度 等 信息 通过 雷达 录取 设备 自动 录取 
下 来 ,然后 通过 数据 通信 设备 传送 到 北美 防空 司令 部 的 信息 处 理 中 心 , 以 计算 飞机 的 飞行 航 
向 、 飞 行 速度 和 飞行 的 瞬时 位 置 ,判断 敌 机 是 否 来 犯 ,并 将 这 些 信息 迅速 传 到 空军 和 高 炮 部 
队 ,使 它们 有 足够 的 时 间作 战斗 准备 。 

SAGE 系统 分 为 17 个 防区 ,每 个 防区 的 指挥 中 心 装 有 两 台 IBM 计算 机 ,通过 通信 线路 
连接 防区 内 各 雷达 观测 站 、 机 场 、 防 空 导 弹 和 高 射 炮 阵 地 ,形成 联机 计算 机 系统 。 由 计算 机 
程序 辅助 指挥 员 决策 ,自动 引导 飞机 和 导弹 进行 拦截 。SAGE 系统 最 早 采 用 了 人 机 交互 的 
显示 器 ,研制 了 小 型 计算 机 形式 的 前 端 处 理 器 ,制订 了 数据 通信 的 最 初 规程 ,并 提供 了 多 种 


@ 前 苏联 发 射 的 人 类 第 一 颗 人 造 卫 星 , 名 为 “ 鸣 伯 尼克 ”, 意 为 “旅行 同伴 ”。 卫 星 于 莫斯科 时 间 1957 年 10 月 4 日 
22 点 28 分 由 前 苏联 的 R7 火箭 在 拜 科 努 尔 航天 基地 发 射 升 空 , 它 是 一 只 直径 为 58 厘米 、 重 83 公斤 的 金属 球 , 沿 椭圆 轨 
道 绕 地 球 运转 , 距 地 面 的 最 大 高 度 为 900 公里 , 绕 地 球 一 图 约 98 分 钟 。 作 为 人 类 历史 上 的 第 一 颗 人 造 地 球 卫星 ,卫星 内 
部 装 有 温度 计 、. 电 池 、 无 线 电 发 射 器 ( 随 着 温度 的 变化 而 改变 蜂 鸣 声 的 音调 ) 和 氮气 (为 卫星 的 内 部 提供 压力 ) ,外 部 装 有 4 
根 鞭 状 天 线 ,经 过 92 天 太空 飞行 后 在 重 返 地 球 时 烧毁 。Sputnik 的 发 射 成 功 给 政治 .军事 .技术 .科学 领域 带 来 了 新 的 发 
展 ,标志 着 人 类 航天 时 代 的 来 临 ,也 直接 导致 了 美国 和 前 苏联 的 航天 技术 竞赛 。 

加 ”美国 麻 省 理工 学 院 林 肯 实 验 室 (Lincoln Laboratory) 是 美国 反 导 弹 防 御 系统 的 技术 支撑 单位 ,前 身 是 麻 省 理工 
学 院 辐射 实验 室 。1950 年 底 , 在 美国 空军 建议 下 ,实验 室 开始 致力 于 空中 防御 研究 ,从 此 .实验 室 变 成 一 个 从 事 军事 空 防 
研究 的 实验 室 。 著 名 的 研究 项 目 有 美国 空军 半自动 地 面 防空 系统 (Semi-Automatic Ground Environment,SAGE)。 该 系 
统 于 1963 年 建成 ,被 认为 是 计算 机 技术 和 通信 技术 结合 的 先驱 。 


路 径 选 择 算法 。SAGE 软件 开发 计划 成 了 软件 工程 开发 中 最 “崇高 ”的 事业 之 一 。 当 时 美国 
程序 员 的 数目 大 约 为 1200 名 ,有 700 人 为 SAGE 项 目 工作 ,该 系统 于 1963 年 建成 。 

SAGE 并 非 现代 意义 上 的 计算 机 网 络 系统 ,但 被 认为 是 计算 机 技术 和 通信 技术 结合 的 
先驱 ,开创 了 计算 机 网 络 的 先河 ,是 计算 机 网 络 的 萌芽 。20 世纪 60 年 代 , 类 似 SAGE 的 计 
算 机 网 络 不 断 出 现 , 这 类 网 络 被 称 为 “中 央 控 制式 网 络 ”。 其 特点 是 都 有 一 台中 央 主 机 ,用 于 
存储 和 处 理 数据 ; 其 他 计算 机 都 作为 终端 ,通过 通信 线路 和 中 央 主 机 连接 。 终 端 和 主机 直 
接连 接 , 不 经 过 其 他 线路 ,优点 是 便于 管理 .但 是 也 存在 巨大 的 风险 ,一 旦 切断 任何 一 条 线 
路 ,将 导致 通信 中 断 ,如 果 中 央 主 机 被 摧毁 , 则 整个 系统 即刻 崩溃 。 

针对 中 央 控 制式 网 络 存 在 的 致命 弱点 ,1961 年 ,美国 加 州 大 学 的 伦 纳 德 ， 克 兰 罗 克 (L. 
Clenrock) 发 表 了 题 为 (大 型 通信 和 网络 的 信息 流 ) 的 论文 ,第 一 次 详细 论述 了 分 布 式 网 络 理 
论 。 在 随后 的 时 间 里 , 美 籍 波 兰 人 保罗 ， 巴 兰 (Paul Baran) 发 表 了 一 系列 分 布 式 网 络 理论 
的 文章 ,提出 了 分 布 式 网 络 的 核心 概念 , 即 包 交 换 (Packet Switching): 要 传播 的 数据 被 封 
装 成 一 系列 的 数据 包 , 这 些 包 沿 着 不 同 的 路 径 传输 ,在 信和 宿 端 被 重新 组 织 到 一 起 。 这 样 , 即 
使 部 分 线路 被 毁坏 ,还 可 以 选择 其 他 线路 传输 。 

在 分 布 式 网 络 中 ,不 设 中 央 计 算 机 ,每 台 计 算 机 都 是 一 个 计算 节点 ,各 个 节点 都 通过 线 
路 连接 。 节 点 之 间 的 通信 不 再 依赖 于 中 央 主 机 ,如 果 某 条 线路 中 断 ,通信 可 以 选择 其 他 线路 
进行 ,而 不 至 于 导致 通信 中 断 。 

2. ARPA 网 

在 ARPA 内 ,每 一 个 科研 项 目 中 ,研究 人 员 都 配备 了 功能 强大 、 价 格 昂贵 的 计算 机 ,这 
些 计 算 机 功能 不 同 , 互 不 兼容 ,造成 经 费 的 极 大 浪费 。 能 和 否 将 这 些 计算 机 连接 起 来 ,这 样 的 
想法 已 经 酝酿 已 久 。1966 年 春 ,作为 第 三 任 ARPA 信息 处 理 技术 处 主任 的 罗伯特 ， 泰勒 
(Robert Tayior) 向 ARPA 署 长 赫兹 费 尔 德 提出 了 由 ARPA 出 面 建立 一 个 小 型 网 络 的 
设想 。 

罗伯特 ， 泰勒 的 构建 网 络 的 设想 随即 立项 ,泰勒 想到 的 项 目 第 一 人 选 便 是 年 仅 29 岁 的 
计算 机 天 才 拉 里 。 罗 伯 蒋 (Larry Roberts) ,当时 罗伯茨 正在 林肯 实验 室 对 两 台 计 算 机 之 间 
的 连接 进行 实验 。1967 年 ,罗伯茨 离开 林肯 实验 室 ,来 到 ARPA ,成 为 ARPA 网 项 目 负责 
人 ,开始 着 手 筹建 ARPA 网 ,并 进行 规划 和 设计 。 

在 随后 一 年 多 的 时 间 里 ,提出 分 布 式 通信 理论 的 保罗 。 巴 兰 (Paul Baran) ,提出 分 组 交 
换 理论 的 伦 纳 德 。 克 兰 罗 克 ( Leonard Kleinrock)、TCP/IP 协议 的 发 明 人 罗伯特 ， 卡 恩 
(Robert Kahn) 和 温 顿 。 瑟 夫 (Wint Cerf) 相继 来 到 ARPA ,一 群 时 代 的 精英 就 这 样 汇聚 到 
一 起 。 放 弃 中 央 控 制 、 实 行 分 布 式 包 交 换 的 通信 思想 在 这 些 杰出 的 大 脑 之 间 迅 速达 成 了 
共识 。 

1968 年 6 月 ,罗伯茨 正式 向 ARPA 提出 了 自己 的 研究 报告 “资源 共享 的 计算 机 网 络 ”， 
其 核心 思想 就 是 让 ARPA 的 所 有 计算 机 相互 连接 ,让 大 家 彼此 共享 各 自 的 研究 成 果 。 根 据 
该 研究 报告 ,美国 国防 部 建立 了 ARPA 网 ,这 就 是 互联 网 的 前 身 。 拉 里 。 罗 伯 茨 也 成 为 
ARPA 网 之 父 ,ARPA 网 也 成 就 了 罗伯茨 。 

最 初 的 ARPA 网 由 美国 西海 岸 的 四 个 节点 构成 ,第 一 个 节点 选 在 加 州 大 学 洛杉矶 分 
校 , 因 为 罗伯茨 MIT 林肯 实验 室 的 同事 .挚友 和 网 络 启蒙 老师 克 兰 罗 克 正在 该 校 主持 网 络 
研究 ,第 二 个 节点 选 在 斯 坦 福 研 究 院 ,因为 那里 有 道格拉斯 。 恩 格 巴特 (Douglas Engelbart) 
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等 一 批 网 络 先驱 人 物 。 另 外 两 个 节点 是 加 州 大 学 巴巴 拉 分 校 和 犹他 大 学 。1969 年 底 ， 
ARPA 网 正式 投入 运行 。 

今天 ,冷战 的 阴云 早已 散 去 。 但 是 ,在 ARPA 网 基础 上 发 展 起 来 的 互联 网 已 经 成 为 一 
个 国家 继 领 土 、 领 海 .领空 ,太空 之 后 的 第 五 疆域 ,犹如 没有 硝烟 的 战场 ,技术 竞争 将 更 加 激 
烈 , 甚 至 关 平一 个 国家 ,一 个 民族 的 发 展 和 兴衰 。 

半 个 多 世纪 过 去 了 ,ARPA 一 直 给 人 一 种 神秘 感 。 除 了 在 美国 太空 计划 等 军事 领域 ， 
ARPA 扮演 着 关键 角色 外 ,我 们 生活 中 的 许多 重大 技术 发 明 也 都 归功 于 ARPA ,如 互联 网 、 
卫星 全 球 定位 系统 、 隐 形 技术 以 及 计算 机 鼠标 等 。 然 而 ,ARPA 的 许多 项 目 也 备 受 指责 , 造 
成 大 量 的 资金 浪费 。 或 许 , 允 许 冒险 甚至 失败 也 是 ARPA 文化 的 一 部 分 。 


1.1.2 互联 网 的 诞生 


在 ARPA 网 诞生 之 际 ,当时 的 情况 是 大 部 分 的 计算 机 并 不 能 互相 兼容 ,如 何 让 这 些 不 
同 硬件 .不 同系 统 的 计算 机 互联 ,成 为 网 络 研究 的 焦点 和 难点 。 这 导致 了 TCP/IP 协议 的 研 
究 , 也 成 就 了 今天 的 互联 网 。 

1. TCP/IP 协议 的 研制 成 功 

早期 的 ARPA 网 ,计算 机 之 间 采 用 网 络 控制 协议 (Network Control Protocol, NCP) 通 
言 。NCP 存在 两 个 重要 缺陷 , 即 网 络 中 的 主机 没有 设置 唯一 的 地 址 , 且 缺 乏 纠 错 能 力 。 随 
着 ARPA 联网 主机 数量 的 增多 ,网 络 性 能 迅速 下 降 。1972 年 ,罗伯特 ， 卡 恩 邀 请 NCP 通 
信 协 议 的 设计 者 文 顿 * 瑟 夫 研究 一 种 新 的 改进 型 的 协议 ,以 蔡 换 ARPA 网 中 的 NCP。 这 
项 研究 就 是 后 来 著名 的 TCP/IP 协议 ,该 协议 于 1973 一 1974 年 期 间 开发 完成 。 

1975 年 ,两 个 网 络 之 间 的 TCP/IP 通信 在 斯 坦 福 大 学 和 伦敦 大 学 之 间 进 行 了 测试 ; 
1977 年 11 月 ,三 个 网 络 之 间 的 TCP/IP 测试 在 美国 .英国 和 挪威 之 间 进 行 。TCP/IP 协议 
的 研究 成 功 ,彻底 解决 了 不 同 计算 机 系统 之 间 的 通信 间 题 ,计算 机 互联 的 主要 障碍 被 清除 。 
1975 年 ,ARPA 网 的 运行 管理 移交 给 美国 国防 通信 局 (DCA)。1982 年 ,DCA 将 ARPA 网 
各 站 点 的 通信 协议 全 部 转 为 TCP/IP。 

1983 年 1 月 1 日 ,在 ARPA 网 中 ,NCP 被 永久 停止 使 用 。 同 年 ,ARPA 网 被 分 成 两 部 
分 ,一 部 分 作为 军用 , 称 为 MILnet, 另 一 部 分 作为 民用 ,并 命名 为 Internet。ARPA 网 开始 
从 一 个 实验 型 网 络 向 实用 型 网 络 转变 ,成 为 互联 网 正式 诞生 的 标志 。 从 此 ,互联 网 ,这 个 美 
国 军 方 和 科研 机 构 的 “ 宁 世 儿 ”, 脱 离 了 军 方 ,开始 了 其 民用 和 实用 化 发 展 的 新 阶段 。1983 
年 1 月 1 日 被 称 为 互联 网 发 展 史 上 的 一 个 重要 纪念 日 。 

2. 互联 网 发 展 的 几 个 重要 阶段 

如 果 把 Internet 的 发 展 划分 阶段 的 话 ,那么 1969 一 1982 年 的 这 个 时 期 可 以 看 成 是 
Internet 的 提出 、 研 究 和 试验 阶段 ,这 时 的 Internet 以 ARPA 网 为 主干 网 ,同时 运行 NCP 协 
议和 TCP/IP 协议 。 由 于 ARPA 网 采用 离散 结构 ,不 设 中 央 网 络 控制 设备 ,实现 了 网 络 汇 
道 的 多 样 性 ,从 而 减少 了 系统 彻底 崩溃 的 可 能 性 ,网 络 的 生存 能 力 得 到 了 保证 ,实现 了 
ARPA 的 最 初 构想 。1983 年 1 月 1 日 ,NCP 协议 停止 运行 ,所 有 联网 主机 全 部 运行 TCP/ 
IP 协议 。 随 着 ARPA 网 一 分 为 二 ,标志 着 互联 网 的 诞生 ,也 是 互联 网 实用 发 展 阶段 的 
开始 。 

从 1983 年 到 1989 年 可 以 看 作 是 Internet 的 实用 发 展 阶 段 。 为 了 使 全 美国 的 科学 家 和 








工程 师 都 能 够 共享 那些 过 去 只 有 军事 部 门 和 少数 科学 家 才能 够 使 用 的 超级 计算 机 设施 , 美 
国 国家 科学 基金 会 (National Science Foundation, NSF) 于 1985 年 提供 巨 资 建设 了 全 美 5 个 
超级 计算 中 心 ,同时 建设 了 将 这 些 超 级 计算 中 心 和 各 科研 机 构 相 连 的 高 速 信息 网 络 
NSFnet。1986 年 ,NSFnet 成 功 地 成 为 Internet 的 第 二 个 骨干 网 。NSFnet 对 Internet 的 推 
广 起 到 了 巨大 的 推动 作用 , 它 使 得 Internet 不 再 是 仅 有 科学 家 、 工 程 师 、 政 府 部 门 使 用 的 网 
络 ,Internet 进入 了 以 资源 共享 为 中 心 的 实用 服务 阶段 。 可 以 说 ,NSF 的 介入 是 互联 网 发 生 
的 第 一 次 飞跃 。 

1990 年 以 后 ,Internet 开始 进入 它 的 商业 化 发 展 阶段 。 随 着 万 维 网 的 兴起 ,众多 的 商业 
机 构 开 始 进入 互联 网 ,进一步 推动 了 互联 网 的 民用 化 发 展 。 此 时 .NSF 意识 到 自己 的 使 命 
已 经 完成 ,1995 年 4 月 30 日 ,NSF 网 停止 运行 ,取而代之 的 是 美国 政府 指定 的 三 家 商业 公 
司 , 即 太平 洋 贝 尔 公司 ,美国 科技 公司 和 斯 普 林 特 公司 。 至 此 ,互联 网 完全 商业 化 了 。 从 此 ， 
互联 网 用 户 开 始 向 全 世界 扩展 ,并 以 每 月 15% 的 速度 迅速 增长 ,每 30 分 钟 就 有 一 个 网 络 
连 入 Internet。 随 着 网 上 通信 和 量 的 急剧 增长 ,Internet 开始 不 断 采用 新 的 技术 以 适应 发 展 
的 需求 ,其 主干 网 由 政府 部 门 资助 开始 向 商业 计算 机 公司 、 通 信 公 司 转化 。 在 Internet 商 
业 化 的 过 程 中 ,WWW 的 出 现 使 Internet 的 使 用 更 简单 、 更 方便 ,开创 了 Internet 发 展 的 新 
时 期 。 

1987 年 9 月 20 日 20 时 55 分 ,一 份 以 英 德 两 种 文字 书写 的 “跨越 长 城 ,走向 世界 "的 电 
子 邮件 从 中 国 到 达 德 国 , 中 国 接 入 互联 网 的 报告 送 达 国务 院 。1994 年 4 月 20 日 ,我 国 实现 
了 与 Internet 的 全 功能 链接 ,成 为 接 人 国际 互联 网 的 第 77 个 国家 。 


1.1.3 互联 网 的 构成 


互联 网 不 同 于 一 般 的 局 域 网 和 广域网 ,任何 部 门 、 组 织 或 个 人 都 可 以 将 自己 的 网 络 或 计 
算 机 连接 到 互联 网 ,成 为 互联 网 的 一 部 分 。 互 联网 的 开放 性 ,使 其 成 为 一 个 覆盖 全 球 的 计算 
机 网 络 , 各 种 不 同类 型 的 ,不同 规 模 的 、 分 布 在 世界 各 地 的 计算 机 网 络 ,通过 遍布 全 球 的 通信 
线路 和 广域网 设备 连接 在 了 一 起 ,互联 网 概念 图 如 图 1-1 所 示 。 
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在 互联 网 中 ,每 一 台 计 算 机 都 有 一 个 逻辑 地 址 (IP 地 址 ) ,计算 机 之 间或 网 络 设备 间 通 
过 统一 的 TCP/IP 进行 通信 。 在 互联 网 中 ,分 布 着 无 以 计数 的 各 类 服务 器 ,包括 Web 服务 
器 、E-mail 服务 器 FTP 服务 器 .DNS 服务 器 流 媒体 服务 器 ,以 及 各 种 各 样 的 应 用 服务 器 ， 
如 网 络 游戏 服务 器 等 。 正 是 这 些 数量 众多 ,功能 各 异 的 服务 器 ,为 全 球 的 互联 网 用 户 提供 了 
各 种 各 样 的 网 络 服务 ,不 断 改 变 着 人 们 的 工作 ,学习 .生活 和 娱乐 方式 。 
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1.2 Web 及 其 工作 原理 


在 Internet 中 ,Web 服务 是 最 主要 的 服务 之 一 :也 是 使 用 最 广泛 的 互联 网 服务 ,对 于 普 
通 的 用 户 来 讲 , 万 维 网 (World Wide Web,WWW) 通 常 被 当 作 是 互联 网 的 代名词 。 但 是 ,从 
原理 上 来 讲 , 万 维 网 (WWW) 和 互联 网 (Internet) 是 两 个 不 同 的 概念 ,两 者 既 有 密切 的 联系 ， 
又 有 着 根本 的 不 同 。 


1.2.1 万 维 网 


在 20 世纪 90 年 代 以 前 ,互联 网 应 用 主要 限于 在 科研 领域 ,Internet 中 的 信息 交流 还 没 
有 一 种 统一 的 手段 ,根据 交流 的 信息 不 同 ( 如 文字 、 图 像 .声音 等 ) 需 要 调用 不 同 的 Internet 
服务 ,很 不 方便 。 因 此 ,在 互联 网 诞生 后 的 相当 长 的 时 间 里 , 它 一 直 局 限于 专业 人 员 的 圈子 
里 ,与 普通 公众 天 高 地 远 ,互联 网 应 用 依然 是 普通 人 难以 跨越 的 。 

当时 ,在 瑞士 日 内 瓦 欧洲 核子 研究 组 织 (European Organization for Nuclear Research， 
CERN) 总 部 ,来 自 80 多 个 国家 的 6500 多 名 科学 家 和 工程 师 之 间 使 用 各 自 的 计算 机 ,并 利 
用 互联 网 进行 数据 分 享 , 这 个 庞大 的 研究 组 织 内 部 对 互联 网 的 需求 就 是 整个 信息 世界 的 一 
个 缩影 。 能 否 将 分 布 在 不 同 计 算 机 中 、 各 种 不 同形 式 的 信息 交换 方式 之 间 建 议 一 个 统一 的 
语言 呢 ? 人 们 登录 一 个 页 面 , 其 中 就 会 列 出 可 以 访问 的 不 同 资源 ,只 要 简单 地 单 击 一 下 ,就 
可 以 获得 所 需要 的 资源 。 这 样 的 想法 开始 在 带 姆 . 伯 纳 斯 - 李 (Tim Berners-Lee)2 的 脑海 
里 萌发 了 ,他 当时 正 供职 于 日 内 瓦 欧洲 核子 研究 组 织 总 部 。 

1989 年 3 月 , 伯 纳 斯 - 李 开 发 了 一 个 超级 文本 系统 以 及 统一 的 超 文 本 传输 协议 
(HTTP)。 通 过 HTTP, 文 本 、 图 片 . 声 音 等 不 同 的 磁盘 文件 的 传输 统一 了 。1990 年 底 , 第 
一 个 基于 字符 界面 的 Web 客户 浏览 程序 开发 成 功 , 1991 年 3 月 ,客户 浏览 程序 开始 在 
Internet 上 运行 ,1991 年 底 CERN 向 高 能 物理 学 界 宣布 了 Web 服务 。1991 年 5 月 , 伯 纳 
斯 - 李 将 其 发 明 命 名 为 World Wide Web ,网 页 的 概念 出 现 了 。 于 是 ,人 们 登录 互联 网 开始 
了 。 如 果 说 拉 里 。 罗 伯 茨 实现 了 计算 机 之 间 的 连接 , 伯 纳 斯 - 李 则 带领 人 们 跨越 了 互联 网 应 
用 的 山 亦 ,实现 了 人 与 网 络 的 连接 。 巧 合 的 是 ,在 创造 互联 网 及 应 用 的 历史 上 ,他们 都 只 有 
29 岁 。 

什么 是 World Wide Web 呢 ? 从 万 维 网 诞生 起 ,人 们 并 没有 给 它 一 个 确切 的 定义 。 我 
们 可 以 从 Internet 的 构成 和 服务 来 理解 Web。 从 组 成 上 讲 ,Internet 是 由 成 千 上 万 的 网 络 
通过 通信 线路 和 网 络 设备 连接 而 成 的 ,或 者 说 是 一 个 全 球 范围 的 网 间 网 。 在 Internet 中 ,分 





@ 欧洲 核子 研究 组 织 (European Organization for Nuclear Research) ,通常 被 简称 为 CERN, 缩 略 词 来 源 于 法 语 欧 
洲 核子 研究 理事 会 的 意思 。CERN 是 世界 上 最 大 型 的 粒子 物理 学 实验 室 , 也 是 万 维 网 的 发 祥 地 。 该 组 织 成 立 于 1954 年 
9 月 29 日 ,整个 机 构 位 于 瑞士 日 内 瓦 西 部 接壤 法 国 的 边境 。CERN 的 主要 功能 是 根据 高 能 物理 学 研究 的 需要 ,为 科学 家 
提供 必要 的 工具 ,包括 粒子 加 速 器 和 其 他 基础 设施 ,对 物质 如 何 构成 和 物质 之 间 的 力量 进行 研究 ,以 及 进行 许多 国际 合 
作 的 实验 。 同 时 CERN 也 设立 了 资料 处 理 能 力 很 强 的 大 型 计算 机 中 心 ,协助 实验 数据 的 分 析 , 供 其 他 地 方 的 研究 员 使 
用 ,形成 了 一 个 庞大 的 网 络 中 枢 。 

@ 蒂 姆 。 伯 纳 斯 - 李 (Tim Berners-Lee,1955 年 6 月 8 日 一 ) ,英国 计算 机 科学 家 , 麻 省 理工 学 院 教授 ,计算 机 科学 及 
人 工 智能 实验 室 创办 主席 及 高 级 研究 员 ,万 维 网 的 发 明 人 。1990 年 12 月 25 日. 罗伯特。 卡 里 奥 在 CERN 和 他 一 起 成 功 
通过 Internet 实现 了 HTTP 代理 与 服务 器 的 第 一 次 通信 。 


布 了 成 千 上 万 的 无 以 计数 的 计算 机 ,这 些 计 算 机 扮演 的 角色 和 所 起 的 作用 不 同 。 有 的 计算 
机 可 以 收发 用 户 的 电子 邮件 ,有 的 可 以 为 用 户 传 输 文件 ,有 的 负责 对 域名 进行 解析 ,更 多 的 
机 器 则 用 于 组 织 并 展示 本 网 络 的 信息 资源 ,方便 用 户 的 获取 。 所 有 这 些 承 担 服 务 任务 的 计 
算 机 我 们 统称 为 服务 器 。 根 据 服 务 的 内 容 , 这 些 服务 器 有 Web 服务 器 文件 传输 服务 器 
(FTP 服务 器 )、E-mail 服务 器 .DNS 服务 器 ,以 及 各 种 各 样 的 应 用 服务 器 等 。 

我 们 可 以 将 World Wide Web 看 作 是 Internet 中 所 有 的 Web 服务 器 构成 的 网 络 ,通过 
网 页 中 的 超 链 接 ,一 个 Web 服务 器 可 以 指向 其 他 的 Web 服务 器 ,那些 Web 服务 器 又 可 以 
指向 更 多 的 Web 服务 器 ,这 样 , 一 个 全 球 范围 的 由 Web 服务 器 组 成 的 World Wide Web( 万 
维 网 ) 就 形成 了 。 在 万 维 网 中 ,Web 服务 器 和 Web 浏览 器 之 间 采 用 HTTP 应 用 层 协 议 进 行 
通信 。 

在 计算 机 网 络 的 发 展 历史 上 ,如果 说 ARPA 网 是 人 类 通信 方式 上 的 一 次 革命 的 话 , 那 
么 WWW 则 是 网 络 使 用 方式 上 的 一 次 革命 ,万 维 网 可 以 看 作 是 互联 网 的 应 用 界面 。 美国 
MIT 教授 .著名 信息 专家 《数字 化 生存 (Bing Digital)》 一 书 的 作者 尼 古 拉 。 尼 葛 洛 庞 帝 
(Nicholas Negroponte) 认 为 : 1989 年 是 互联 网 历史 上 划时代 的 分 水 岭 ,这 一 年 出 现 的 万 维 
网 技术 给 Internet 赋予 了 强大 的 生命 力 ,把 Internet 带 入 了 一 个 上 新 的 时 代 。 


1.2.2 Web 服务 器 


在 计算 机 网 络 中 ,我 们 可 以 将 计算 机 分 为 两 类 , 即 服务 器 和 客户 机 。 所 谓 服务 器 就 是 指 
提供 网 络 服务 的 计算 机 ,对 于 服务 器 计算 机 一 般 需 要 安装 服务 器 操作 系统 ,例如 UNIX、 
Linux, Windows Server 等 网 络 操作 系统 。 在 服务 器 上 ,根据 功能 需要 安装 服务 器 程序 。 所 
谓 服务 器 程序 , 即 一 种 侦 听 程序 ,其 基本 功能 是 侦 听 用 户 请 求 ,为 用 户 提供 服务 。 与 传统 的 
用 户 应 用 程序 不 同 , 服 务 器 程序 通常 没有 漂亮 的 用 户 界 面 。 常 见 的 服务 器 程序 有 : Web 服 
务 器 .E-mail 服务 器 .DNS 服务 器 .DHCP 服务 器 等 。 一 台 服 务 器 计算 机 可 以 安装 一 个 服务 
器 程序 ,也 可 以 安装 多 个 服务 器 程序 。 

所 谓 Web 服务 器 ,就 是 指 安装 了 Web 服务 器 的 计算 机 , 它 为 用 户 提供 网 页 浏览 服务 。 
简单 地 讲 ,用户 通 过 Web 浏览 器 访问 Web 服务 器 , Web 服务 器 将 用 户 要 浏览 的 网 页 发 送 给 
用 户 的 浏览 器 。 要 使 一 台 计算 机 成 为 一 台 Web 服务 器 ,首先 要 在 服务 器 上 安装 服务 器 操作 
系统 ,其 次 ,安装 专门 的 Web 服务 程序 。 根 据 服务 器 操作 系统 不 同 ,可 安装 的 Web 服务 器 
程序 也 不 一 样 ,常见 的 有 : Windows Server 内 置 的 IIS(Internet Information Server) 服 务 组 
件 、 跨 平台 的 Web 服务 器 Apache HTTP server 及 Tomcat 等 。 

客户 机 是 指 普通 的 用 户 计算 机 ,通常 不 以 提供 网 络 服务 为 目的 .安装 的 操作 系统 通常 也 
是 一 些 桌 面 操作 系统 ,例如 Windows XP/7、Mac OS 等 客户 机 操作 系统 。 客 户 机 上 安装 的 
程序 也 是 各 种 应 用 软件 ,例如 : Word、Excel、PPT 等 各 种 办 公 软 件 ,Photoshop、Flash 等 各 
种 工具 软件 ,上 网 用 的 Web 浏览 器 .MSN `QQ 聊天 等 应 用 软件 。 

总 之 ,服务 器 和 客户 机 的 区 分 不 仅 是 操作 系统 不 同 ,安装 的 程序 也 不 相同 ,服务 器 上 要 
安装 服务 程序 ,客户 机 上 则 安装 应 用 软件 。 同 时 ,要 使 用 服务 器 上 的 服务 程序 ,需要 客户 机 
上 安装 相应 的 客户 端 程序 或 做 客户 端的 配置 。 例 如 , Web 浏览 器 是 Web 服务 器 的 客户 端 
程序 ,通过 TCP/IP 协议 设置 ,可 以 将 一 台 计 算 机 设置 为 DNS 客户 或 DHCP 客户 等 。 
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1.2.3 Web 浏览 器 


在 计算 机 网 络 中 ,服务 器 和 客户 机 总 是 成 对 出 现 的 ,用 户 通过 客户 端 程序 使 用 服务 器 ， 
或 者 通过 特定 的 设置 将 计算 机 设置 为 特定 服务 的 客户 机 。 所 谓 Web 浏览 器 (Browser) 就 是 
前 面 经 常 提 到 的 Web 客户 端 程序 ,用户 要 浏览 Web 页 面 必须 在 本 地 计算 机 上 安装 Web 浏 
览 器 软件 。 通 过 在 浏览 器 地 址 栏 中 输入 URL 资源 地 址 ,Web 服务 器 将 把 地 址 中 指定 的 网 
页 文件 发 送 到 客户 端 浏 览 器 ,并 在 浏览 器 窗口 打开 。 

从 本 质 上 讲 , Web 浏览 器 是 一 种 用 于 网 页 浏览 的 应 用 软件 ,有 两 大 功能 : 第 一 , Web 浏 
览 器 是 HTML 和 XML 格式 的 文档 阅读 器 , 它 能 够 对 网 页 中 的 各 种 标记 进行 解释 显示 。 第 
二 ,Web 浏览 器 是 一 种 网 页 客户 端 脚本 程序 的 解释 机 ,如 果 网 页 中 包含 客户 端 脚本 程序 , 浏 
览 器 将 执行 这 些 客户 端 脚本 代码 ,从 而 增强 网 页 的 交互 性 和 动态 效果 。 不 同 版 本 的 浏览 器 
都 需要 遵循 HTML 规范 中 定义 的 标记 集 , 同 时 为 了 便于 脚本 编程 ,每 个 浏览 器 程序 本 身 也 
提供 了 相应 的 浏览 器 内 置 对 象 ,类 似 于 传统 软件 开发 中 的 函数 库 和 类 库 。 

在 Web 发 展 初期 ,最 早 的 Web 浏览 器 以 Lynx 为 代表 的 基于 字符 的 Web 客户 机 程序 ， 
主要 在 不 具备 图 形 图 像 功能 的 客户 计算 机 上 使 用 。Lynx 由 美国 堪萨斯 大 学 (University of 
Kansas) 的 Lou Montulli 等 人 研制 ,于 1995 年 发 布 。Lynx 有 两 种 浏览 方式 : 一 种 方式 是 使 
用 光标 移动 键 , 即 上 下 左右 四 个 方向 键 选择 超 链 接 。 第 二 种 方式 是 Lynx 先 将 网 页 上 所 有 
超 链 接 编 号 ,用 户 通过 输入 超 链 接 编号 选择 超 链 接 。 基 于 字符 的 Lynx 浏览 器 展示 的 互联 
网 ,没有 图 像 .声音 ,也 没有 色彩 ,枯燥 、 乏 味 ,操作 指令 难于 记忆 。 

在 美国 国家 超级 计算 应 用 中 心 (National Center for Supercomputer Applications， 
NCSA) ,24 岁 的 美国 伊利 诺 斯 大 学 学 生 马 克 … 安德森 (Marc Andreessen) 和 他 的 同事 贝 纳 
一 起 合作 ,开始 了 一 种 新 的 图 形 界面 浏览 器 的 研制 工作 。 经 过 6 个 星期 的 辛苦 工作 ,在 
1993 年 1 月 写 出 了 UNIX 版 的 马赛 克 (Mosaic) 0 浏览 器 , 它 是 一 款 面向 多 媒体 计算 机 的 
Web 客户 机 程序 , 它 可 以 在 各 种 类 型 的 小 型 机 上 运行 ,也 可 以 在 IBM PC、Macintosh 机 以 
及 UNIX 操作 系统 软件 平台 上 运行 。 良 好 的 图 形 界面 和 便捷 的 鼠标 操作 方式 ,使 得 该 浏览 
器 在 短 短 的 4 个 月 内 ,就 达到 了 600 万 台 的 装机 量 , 市 场 占有 率 从 零 一 下 子 暴 增 到 75%, 拉 
开 了 互联 网 风起云涌 的 发 展 序幕 ,也 吸引 了 全 世界 的 科技 精英 、 创 业者 和 风险 投资 人 奋 不 顾 
身 地 涌 和 到 互联 网 发 展 的 浪潮 中 。 

目前 ,Web 浏览 器 软件 产品 很 多 ,除了 微软 的 IE(Internet Explorer) 浏 览 器 外 ,常见 的 
浏览 器 还 有 Maxthon( 傲 游 )、Firefox( 火 狐 ) 等 。 此 外 ,Google、360 等 也 分 别 推出 了 自己 的 
Web 浏览 器 产品 ,例如 ,Google Chrome 浏览 器 ,这 些 浏览 器 的 目标 就 是 提升 稳定 性 、 速 度 


@” ”Mosaic( 马 赛 克 ) 浏 览 器 ,又 称 NCSA Mosaic 浏览 器 ,是 互联 网 历史 上 第 一 个 获 普遍 使 用 和 能 够 显示 图 片 的 网 页 
浏览 器 ,由 美国 伊利 诺 斯 大 学 NCSA 组 织 的 马克 “。 安德森 (Marc Andreessen) 等 人 研发 ,1993 年 1 月 上 线 ,1997 年 1 月 7 
日 正式 终止 开发 和 支持 。1994 年 4 月 ,安德森 同 硅谷 风险 投资 家 吉姆 "克拉 克 一 起 创立 Mosaic 通讯 公司 ,集中 全 力 开 
发 网 络 浏览 器 。 为 避免 和 NCSA 的 法 律 纠葛 ,Mosaic 通讯 公司 后 更 名 为 网 景 公 司 , 浏 览 器 产品 也 更 名 为 网 景 导航 者 浏览 
器 (Netscape Navigator) 。 

网 景 公司 于 1995 年 8 月 9 日 上 市 ,从 一 家 创始 资金 只 有 400 万 美元 的 小 公司 ,在 华尔街 上 市 的 几 个 小 时 内 ,瞬间 达 
到 市 值 2000 亿美 元 的 巨人 ,相当 于 通用 动力 公司 40 年 发 展 才 达 到 的 市 值 。1998 年 11 月 24 日 ,网 景 公司 被 因特网 服务 
提供 商 美国 在 线 AOL 收购 。2003 年 5 月 ,微软 和 Netscape 的 母 公司 达成 协议 .微软 支付 AOL7. 5 亿美 元 , AOL 继续 使 
用 和 推广 IE, 取 代 Netscape 的 位 置 。2003 年 7 月 15 日 网 景 公 司 解散 。 


和 安全 性 ,并 创造 出 更 加 简单 且 有 效率 的 用 户 界面 ,并 具有 多 个 操作 系统 版 本 。 在 智能 手机 
领域 ,各 种 专用 浏览 器 也 越 来 越 多 。 


1.2.4 超 文 本 传输 协议 


在 万 维 网 中 ,网 页 浏览 实际 上 就 是 Web 浏览 器 和 Web 服务 器 之 间 进 行 通信 ,进行 网 页 
及 相关 文件 传输 的 过 程 。Web 浏览 器 和 Web 服务 器 之 间 的 通信 采用 超 文本 传输 协议 
(HyperText Transfer Protocol, HTTP) 通 信和 .概念 模型 如 图 1-2 所 示 。 





图 1-2 Web 的 工作 原理 


1. HTTP 协议 

在 互联 网 中 , 超 文 本 传输 协议 HTTP 是 应 用 层 协议 ,主要 功能 是 在 计算 机 之 间 快 速 地 
传递 超 文本 文件 ,采用 请 求 /响应 模型 工作 。 当 用 户 在 浏览 器 地 址 栏 中 输入 URL 地 址 或 单 
击 网 页 中 的 一 个 超 链接 时 ,浏览 器 就 向 Web 服务 器 发 送 HTTP 请 求 。HTTP 请 求 被 送 往 
URL 指定 的 Web 服务 器 , Web 服务 器 端的 HTTP 服务 器 程序 接收 到 用 户 的 HTTP 请 求 
后 ,进行 必要 的 操作 ,返回 HTTP 响应 给 Web 浏览 器 。 

在 HTTP 通信 中 ,HTTP 消息 包括 客户 机 向 服务 器 的 请 求 消息 和 服务 器 向 客户 机 的 
响应 消息 。HTTP 消息 由 一 个 起 始 行 ,一 个 或 者 多 个 头 域 ,以 及 消息 体 ( 可 选 ) 组 成 。 
HTTP 头 是 HTTP 请 求 和 相应 的 核心 部 分 ,它们 携带 关于 客户 端 浏 览 器 ,被 请 求 页 面 , 服 
务 器 及 其 他 信息 。HTTP 头 包括 通用 头 、 请 求 头 、 响 应 头 和 实体 头 四 个 部 分 。 每 个 头 域 由 

一 个 域名 .冒号 (:) 和 域 值 三 部 分 组 成 ,域名 大 小 写 无 关 , 每 个 头 域 占 一 行 。 

(1) 通用 头 域 ,包含 请 求 和 响应 消息 都 支持 的 头 域 。 通 用 头 域 包含 的 字段 有 : Cache- 
Control Connection ,Date、Pragma Transfer-Encoding、Upgrade、Via。 关 于 各 个 头 域 的 含 
义 及 取 值 请 参考 HTTP 协议 规范 ,以 下 同 。 

(2) pi 允许 客户 端 向 服务 器 传递 关于 请 求 或 者 关于 客户 机 的 附加 信息 。 请 求 
头 域 包含 字 段 有 : Accept、Accept-Charset、Accept-Encoding、Accept-Language、 
smite From、 Host、 If-Modified-Since、 If-Match、 If-None-Match、 If-Range、 If- 
Range, I-Unmodified-Since、 Max-Forwards、 Proxy-Authorization、 Range、 Referer、 User- 
Agent。 

(3) 响应 头 域 ,允许 服务 器 传递 不 能 放 在 状态 行 的 附加 信息 ,这 些 域 主要 描述 服务 器 的 
信息 和 Request-URI 进一步 的 信息 。 响 应 头 域 有 : Age、 Location、Proxy-Authenticate、 
Public、Retry-After\Server\Vary、Warning\WWW-Authenticate。 
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(4) 实体 ,请 求 消息 和 响应 消息 都 可 以 包含 实体 信息 ,实体 信息 一 般 由 实体 头 域 和 实体 
两 部 分 组 成 。 实 体 头 域 包含 关于 实体 的 元 信息 ,实体 是 要 传递 的 数据 ,是 一 个 经 过 编码 的 字 
节 流 。 在 HTTP 通信 中 ,如 果 存 在 不 支持 的 通用 头 域 , 一 般 将 会 作为 实体 头 域 处 理 。 

2. 请 求 消息 

当 用 户 在 Web 浏览 器 地 址 栏 中 输入 一 个 URL 或 单 击 页 面 中 的 超 链接 时 ,浏览 器 向 
Web 服务 器 发 送 HTTP 请 求 (HTTP Request) 消 息 。HTTP 请 求 消 息 由 两 部 分 构成 ,第 一 
行为 Request Line, 后 面 的 部 分 为 HTTP 头 。 其 中 ,Request Line 由 三 部 分 组 成 ,一 般 格式 
如 下 : 


Method Request - URI HTTP - Version 


(1) Method, 表 示 对 于 Request-URI 完成 的 方法 ,这 个 字段 是 大 小 写 敏感 的 ,包括 
GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE。 其 中 GET 和 POST 方法 使 用 
较 多 ,用 于 编码 和 传送 变量 名 /变量 值 对 参数 ,两 者 的 主要 区 别 是 : DO GET 方法 使 用 MIME 
类 型 文本 格式 传递 参数 ,在 客户 端 ,GET 方式 通过 URL 提交 数据 ,数据 是 URL 的 一 部 分 ， 
GET 方法 提交 的 数据 最 多 只 能 有 1024 字 节 。@@POST 方法 参数 同样 被 URL 编码 ,但 是 ， 
变量 名 /变量 值 对 不 作为 URL 的 一 部 分 被 传送 ,而 是 放 在 HTTP 请 求 消息 内 部 被 传送 ， 
POST 方法 提交 的 数据 多 少 没 有 限制 ,通常 用 于 提交 表单 数据 , 即 在 网 页 中 ,通过 
< form > 标记 中 设置 method= "POST" 属 性 值 来 标明 表单 数据 的 传送 方式 。 

(2) Request-URI, 遵 循 统一 资源 标识 符 (Universal Resource Identifier,URI) 格 式 , 若 
此 字段 为 星 号 ( * ) ,说 明 请 求 并 不 用 于 某 个 特定 的 资源 地 址 ,而 是 用 于 服务 器 本 身 。 在 
HTTP 中 ,统一 资源 标识 符 URI 和 统一 资源 定位 符 URL (Universal Resource Locator， 
URL) 不 同 ,， URI 表示 请 求 服务 器 的 路 径 及 资源 本 身 , 定 义 一 个 或 多 个 资源 。 而 统一 资源 
定位 符 URL 除了 需要 指定 资源 本 身 ,还 需要 指定 资源 的 访问 方式 ,例如 HTTP、HTTPs、 
FTP 等 。 

(3) HTTP-Version, 表 示 支 持 的 HTTP 版 本 ,例如 HTTP/1.1。 

在 Request Line 的 后 面 是 HTTP 头 域 .请 求 头 域 允许 客户 端 向 服务 器 传递 关于 请 求 或 
者 关于 客户 机 的 附加 信息 。 

一 个 典型 的 HTTP 请 求 消息 如 下 : 


GET /2010/xxjj. html HTTP/I.1 

Host: www, sdu, edu cn 

User-Agent: Nozilla/5.0 Windows HT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2 
Accept; text/html, spplication/xhtmltxml, application/xml;q=0.9, #/*;q0.8 

Accept-Language; zh-en, zh; q=0.5 

Accept-Encoding. grip, deflate 

Connection: keep-alive 

Referer: http://www, sdu edu cen/ 

Cookie: 1zstat_uv=2061275203206613369 |2664626; 1rstat_ss=1170560923_0_1331461597_2684626 


在 上 例 中 ,第 一 行 表示 HTTP 客户 端 通过 GET 方法 获得 指定 URL 下 的 文件 。 通 过 
下 面 的 Referer 可 以 得 到 完整 的 URL 为 http://www. sdu. edu. cn/2010/xxjjhtm 。 
接 下 来 的 部 分 是 该 HTTP 请 求 的 头 域 设 置 , 解 释 如 下 : 
。 Host, Host 头 域 指 定 请 求 资源 的 主机 和 端口 号 ,表示 请 求 URL 的 原始 服务 器 或 网 关 
的 位 置 。HTTP/1. 1 请 求 必须 包含 主机 头 域 ,否则 系统 会 以 400 状态 码 返 回 。 支持 主 


机 头 , 可 以 使 得 在 一 台 Web 服务 器 中 ,通过 设置 不 同 的 头 域 来 同时 运行 多 个 网 站 。 
。 User-Agent, User-Agent 头 域 的 内 容 包含 发 出 请 求 的 用 户 信息 。 
。 Accept, 告 诉 Web 服务 器 浏览 器 可 以 接受 的 介质 类 型 , x /* 表示 任何 类 型 ,type/ * 
表示 该 类 型 下 的 所 有 子 类 型 ,type/sub-type。 
。 Accept-Language, 浏 览 器 申明 自己 接收 的 语言 。 
。 Connection, 如果 取 值 为 close, 则 告知 Web 服务 器 或 者 代理 服务 器 ,在 完成 本 次 请 
求 的 响应 后 , 断 开 连接 ,不 要 等 待 本 次 连接 的 后 续 请 求 了 。 如 果 为 keepalive, 则 告知 
Web 服务 器 或 者 代理 服务 器 ,在 完成 本 次 请 求 的 响应 后 ,保持 连接 ,等 待 本 次 连接 
的 后 续 请 求 。 
Referer, 允许 客户 端 指定 请 求 URI 的 源 资源 地 址 ,这 可 以 允许 服务 器 生成 回 退 链 
表 , 可 用 来 登录 、 优 化 cache 等 。 如 果 请 求 的 URI 没有 自己 的 URI 地 址 ,Referer 不 
能 被 发 送 。 如 果 指 定 的 是 部 分 URI 地 址 , 则 此 地 址 应 该 是 一 个 相对 地 址 。 
3. 响应 消息 
HTTP 相应 消息 (HTTP Response) 由 状态 行头 域 和 内 容 组 成 。 相 应 消息 的 第 一 行为 
状态 行 ,格式 为 : 


HTTP - Version Status - Code Reason - Phrase 


其 中 ,HTTP-Version 表示 支持 的 HTTP 版 本 ,例如 为 HTTP/1. 1。Status-Code 是 一 
个 三 个 数字 的 结果 代码 ,用 于 机 器 自动 识别 。Reason-Phrase 给 Status-Code 提供 一 个 简单 
的 文本 描述 ,用 于 帮助 用 户 理解 。 

站 二 个 和 县 第 一 个 数字 定义 响应 的 类 别 , 后 两 个 数字 没有 分 
类 的 作用 。 常 见 的 状态 码 分 为 五 种 : 1xx: 信息 响应 类 ,表示 接收 到 请 求 并 且 继续 处 理 。 
@2xx: 处 理 成 功 响 应 类 ,表示 动作 被 成 功 接收 、 理 解 和 接受 。@3xx: 重 定向 响应 类 ,为 了 
完成 指定 的 动作 ,必须 接受 进一步 处 理 。@@4xx: 客户 端 错误 ,客户 请 求 包含 语法 错误 或 者 
是 不 能 正确 执行 。@5xx: 服务 端 错误 ,服务 器 不 能 正确 执行 一 个 正确 的 请 求 。 

在 状态 行 的 后 面 是 响应 头 域 ,响应 头 域 允许 服务 器 传递 不 能 放 在 状态 行 的 附加 信息 ,这 
些 域 主要 描述 服务 器 的 信息 和 Request-URI 进一步 的 信息 。 如 果 存 在 不 支持 的 响应 头 域 ， 
一 般 将 会 作为 实体 头 域 处 理 。 

对 于 上 面 的 HTTP 请 求 ,返回 的 一 个 典型 的 HTTP 响应 消息 如 下 : 


HITP/1. 1 304 Not Modified 

Date: Sun, 11 War 2012 08:28:32 GWT 
Server: Apache/2.2.17 (Unix) 
Connection; Keep-Alive 

Keep-Alive; timeout=5, max=100 
Etag: “1684db-1536-4ba3ce4300900” 


上 例 第 一 行 表 示 HTTP 服务 端 响应 一 个 GET 方法 。 接 下 来 的 行 是 头 域 部 分 ,解释 
如 下 : 
。 Server, Server 响应 头 包 含 处 理 请 求 的 原始 服务 器 的 软件 信息 。 此 域 包 含 多 个 产品 
标识 和 注释 ,产品 标识 一 般 按 照 重 要 性 排序 。 
。 Connection, 与 Connection 请 求 对 应 。 如 果 取 值 为 close, 则 表明 连接 已 经 关闭 。 如 
果 取 值 为 keepalive, 则 表明 连接 保持 着 .在 等 待 本 次 连接 的 后 续 请 求 。 
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。 Keep-Alive, 如 果 浏 览 器 请 求 保持 连接 ,该 头 部 表明 Web 服务 器 保持 连接 的 时 间 ( 秒 ) 。 
。 ETag, 一 个 URL 对 象 的 标识 ,作用 跟 Last-Modified 类 似 , 主 要 供 Web 服务 器 判断 
一 个 对 象 是 否 改 变 。 例 如 ,前 一 次 请 求 某 个 HTML 文件 时 ,获得 其 ETag , 当 再 次 请 求 
同一 个 文件 时 ,浏览 器 就 会 把 先前 获得 的 ETag 值 发 送 给 Web 服务 器 ,然后 Web 服务 
器 会 把 这 个 ETag 跟 该 文件 的 当前 ETag 进行 对 比 ,以 判断 文件 是 否 已 经 改变 了 。 
4. 实体 
在 HTTP 通信 中 ,HTTP 请 求 消息 和 HTTP 响应 消息 都 可 以 包含 实体 信息 ,实体 信息 
一 般 由 实体 头 域 和 实体 两 个 部 分 组 成 。 实 体 头 域 包含 关于 实体 的 元 信息 ,实体 头 包括 : 
Allow、Content-Type、Content-Base、Content-Encoding、Content-Language、Content- 
Length, Content-Location、 Content-MD5、 Content-Range、 Etag、 Expires、 Last-Modified、 
extension-header。 实 体 可 以 是 一 个 经 过 编码 的 字 节 流 , 它 的 编码 方式 由 Content-Encoding 
或 Content-Type 定义 , 它 的 长 度 由 Content-Length 或 Content-Range 定义 。extension- 
header 允许 客户 端 定义 新 的 实体 头 ,但 是 这 些 域 可 能 无 法 被 接受 方 识别 。 
在 HTTP 规范 中 ,获取 HTTP 通信 信息 ,可 以 分 析 Web 服务 器 和 Web 浏览 器 的 配置 。 
在 Firefox 浏览 器 中 ,可 以 安装 LiveHTTPHeaders 插件 来 抓 取 HTTP, 插 件 的 下 载 网 址 为 
http://livehttpheaders. mozdev. org/installation. html。 下 载 该 插件 ,安装 Firefox 浏览 器 ， 
执行 “工具 /附加 组 件 " 命 令 , 安装 LiveHTTPHeaders 插件 , 则 在 “工具 ”菜单 中 添加 
LiveHTTPHeaders 命令 ,执行 该 命令 打开 抓 包 窗口 ,然后 在 地 址 栏 输入 一 个 网 址 , 则 在 
LiveHTTPHeaders 窗口 可 看 到 每 个 URL 链接 的 HTTP 请 求 和 响应 消息 。 


1.3 概念 及 术语 


在 Web 中 ,新 的 概念 ,术语 不 断 出 现 , 随 着 Web 应 用 的 普及 ,这 些 本 来 是 专业 的 概念 和 
术语 已 经 生活 化 和 大 众 化 了 。 为 了 更 好 地 理解 这 些 概 念 和 术语 的 本 质 , 下 面 从 计算 机 科学 
和 技术 的 角度 对 Web 中 的 一 些 常用 概念 和 术语 进行 简要 介绍 。 

1. 网 站 (Web Site) 

网 站 又 称 Web 站 点 ,是 互联 网 中 提供 信息 服务 的 机 构 、 组 织 或 个 人 ,他 们 通过 建立 
Web 服务 器 ,并 连接 到 互联 网 中 ,向 用 户 提 供 Web 服务 ,或 称 页 面 浏览 服务 。 此 外 , 随 着 
B/S 架构 的 兴起 ,网 站 已 经 成 为 计算 机 应 用 的 主要 模式 ,如 各 种 各 样 的 电子 商务 平台 ,其 作 
用 已 经 不 再 是 单纯 的 信息 服务 ,而 是 一 个 计算 机 应 用 系统 了 。 

从 技术 上 讲 ,一 个 Web 站 点 就 是 Web 服务 器 中 由 一 个 主 目录 、 子 目录 及 其 包含 的 网 页 
文件 .图 片 文件 及 其 他 各 类 文件 ,以 及 相关 的 数据 库 构成 的 系统 。 网 页 文件 通常 包含 客户 端 
脚本 程序 和 服务 端 脚本 程序 ,并 通过 超 链 接连 接 在 一 起 ,形成 特定 的 应 用 逻辑 ,构成 一 个 特 
定 的 Web 应 用 。 因 此 ,网 站 又 称 为 Web 应 用 。 

Web 应 用 和 传统 的 应 用 程序 相 比 ,主要 的 不 同 有 : @ 程 序 构成 不 同 ,传统 的 应 用 程序 通 
常 是 由 一 个 exe 文件 和 相关 的 dll 库 构 成 ,而 Web 应 用 则 是 由 一 个 主 目录 及 其 包含 的 子 目 
录 和 大 量 网 页 文件 构成 。@ 运 行 环境 不 同 ,传统 应 用 程序 在 操作 系统 上 运行 。 而 Web 应 用 
中 网 页 中 的 程序 包含 了 服务 端的 脚本 程序 和 客户 端 脚 本 程序 ,服务 端的 脚本 程序 在 Web 服 
务 器 上 运行 ,客户 端 脚 本 程序 在 Web 浏览 器 中 运行 。@ 用 户 界面 不 同 , 传 统 应 用 程序 通常 


有 特定 的 用 户 界面 ,有 窗口 .菜单 、 工 具 按 钮 .对 话 框 等 概念 ; 而 Web 应 用 由 一 系列 网 页 构 
成 ,页 面 设计 没有 统一 标准 ,页 面 之 间 通 过 超 链接 等 方式 打开 。 

2. 超 文 本 (Hypertext) 

超 文 本 是 一 种 文本 显示 与 链接 技术 ,可 以 对 文本 中 的 有 关 词 汇 或 句子 建立 链接 ( 即 超 链 
接 ) ,使 其 指向 其 他 段落 ,文本 或 链接 到 其 他 文档 。 通 过 超 链接 ,可 以 在 文档 之 间 .文档 内 部 
之 间 跳 转 , 这 种 文本 的 组 织 方式 与 人 们 的 思维 方式 和 工作 方式 比较 接近 。 

当 超 文 本 显示 时 ,建立 了 链接 的 文本 .图片 通常 以 下 画 线 ,高 亮 等 不 同 的 方式 显示 ,来 表 
明 这 些 文本 或 图 片 对 应 一 个 超 链接 。 当 鼠标 移 过 这 些 文字 时 ,鼠标 会 变 成 手 形 , 单 击 超 链接 
文本 或 图 片 , 可 以 转 到 相关 的 位 置 ,或 打开 一 个 新 的 文档 。 

3. 超 链接 (Hyperlink) 

Web 页 中 当 用 户 单 击 它 时 可 以 转 到 其 他 Web 页 或 当前 页 面 的 其 他 地 方 的 文字 、 图 片 
等 对 象 ,分 为 文本 超 链接 和 图 片 超 链接 两 种 。 如 果 是 文本 超 链接 , 超 链 接 在 Web 页 上 往往 
带 有 下 画 线 或 增 亮 显示 。 当 用 户 将 鼠标 指向 一 个 超 链 接 时 ,鼠标 指针 会 改变 为 手 的 形状 。 

4. 网 页 (Web Page) 

网 页 是 指 Web 服务 器 上 的 一 个 个 超 文本 文件 ,或 者 是 它们 在 浏览 器 上 的 显示 屏幕 。 网 
页 中 往往 包含 指向 其 他 网 页 或 文件 的 超 链 接 。 在 网 页 中 ,除了 文本 、 图 片 等 网 页 内 容 外 , 通 
常 还 包含 客户 端 或 服务 端 脚 本 程序 。 因 此 ,Web 页 面 可 分 为 静态 网 页 (htm 页 面 ) 和 服务 器 
页 面 (Server Page) 两 类 。 含 有 服务 端 脚 本 程序 的 页 面 称 为 服务 器 页 ,根据 程序 的 语言 
型 ,有 JSP 页 面 (Java Server Page)、ASP 页 面 (Active Server Page) 等 。 不 含有 服务 端 脚 本 
程序 的 页 面 称 为 静态 网 页 , 即 普通 htm 页 面 .普通 htm 页 面 可 包含 客户 端 脚本 程序 , 如 
JavaScript 程序 ,客户 端 脚本 程序 在 用 户 的 浏览 器 中 执行 。 

5. 首页 (Home Page) 

对 于 一 个 网 站 ,首页 也 称 网 站 主页 ,通常 是 站 点 的 第 一 个 网 页 ,这 类 似 于 传统 应 用 程序 
的 主 窗口 。 首 页 中 往往 列 出 了 网 站 的 信息 目录 ,或 指向 其 他 站 点 的 超 链 接 , 它 是 一 个 网 站 的 
入 口 。 当 用 户 访 问 一 个 网 站 时 ,如 果 在 URL 中 不 指定 特定 的 网 页 文件 , 则 Web 服务 器 将 站 
点 首页 发 送 到 客户 端 。 在 Web 服务 器 的 配置 中 ,首页 又 称 为 默认 文档 。 

6. 统一 资源 定位 符 (Uniform Resource Locator, URL) 

统一 资源 定位 符 可 以 唯一 标识 一 个 Web 页 .网 页 中 的 一 个 图 片 或 互联 网 中 其 他 资源 的 
一 个 地 址 , 它 将 Internet 提供 的 各 类 服务 统一 编 址 ,以 便 用 户 通 过 Web 客户 浏览 程序 进行 
信息 查询 。URL 的 一 般 形式 为 : 


访问 类 型 :// 网 址 [: 端 口号 ][/[ 文 件 路 径 / 文 件 名 ]][? 参 数 名 = 参数 值 & 参 数 名 = 参数 值 …] 


在 URL 中 ,除了 网 址 外 ,其 他 内 容 都 是 可 选 的 。 其 中 ,访问 类 型 主要 包括 HTTP,FTP 
等 ; 网 址 即 服务 器 的 域名 或 IP 地 址 ,端口 号 对 应 一 个 特定 的 服务 ,默认 端口 号 可 以 省 略 , 例 
如 Web 服务 的 默认 端口 为 80 ,FTP 服务 的 默认 端口 为 21 等 ; 文件 路 径 为 资源 相对 于 主 目 
录 的 相对 路 径 ; 文件 名 是 用 户 浏览 器 指定 的 要 下 载 的 文件 ; 如 果 有 参数 ,在 文件 名 后 面 跟 
字符 “?” 列 出 参数 名 /参数 值 对 ,不 同 的 参数 名 /参数 值 对 之 间 用 “&.” 分 开 。 

在 URL 中 ,默认 端口 号 可 以 省 略 不 写 , 如 果 不 指定 文件 路 径 和 文件 名 , 则 默认 访问 站 
点 根 目录 下 的 首页 文件 ,首页 文件 由 Web 服务 器 指定 。 例 如 ,如 果 用 户 在 浏览 器 地 址 栏 中 
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输入 的 URL 为 : http://www. sdu.edu. cn/ , 则 表明 用 户 要 下 载 域名 为 www. sdu. edu. cn 
的 Web 服务 器 中 根 目录 下 的 首页 文件 。 

随 着 手机 智能 化 的 发 展 和 广泛 应 用 ,手机 上 网 用 户 越 来 越 多 ,和 PC 上 网 需要 输入 网 址 
不 同 ,在 智能 手机 等 移动 网 络 应 用 中 ,二 维 码 ? 成 为 广泛 使 用 的 输入 形式 。 在 印 有 二 维 码 的 
地 方 ,只 要 用 手机 扫 一 下 二 维 码 , 即 可 访问 二 维 码 所 对 应 的 网 络 资源 ,例如 : 打开 网 页 、 网 络 
支付 、 添 加 微 信 好 友 等 。 二 维 码 可 以 通过 一 些 在 线 的 二 维 码 生 成 器 生成 ,其 生成 器 大 都 是 免 
费 的 ,例如 国内 最 大 的 “草料 二 维 码 生成 器 ,可 以 利用 百度 搜索 获取 网 址 。 

7. 端口 (Port) 

在 计算 机 通信 中 ,端口 用 于 标识 一 个 唯一 的 通信 程序 。 根 据 OSI 参考 模型 的 规定 , 数 
据 通 信和 最 终 被 封装 成 包 在 Internet 中 传递 , 当 数 据 包 到 达 接 收 方 时 ,在 接收 方 的 计算 机 上 可 
能 运行 着 多 个 服务 程序 ,服务 程序 将 根据 到 达 的 数据 包 中 的 端口 号 来 决定 是 否 接 收 一 个 到 
达 的 数据 包 , 这 和 旅客 在 机 场 的 行李 传送 带 旁 提取 自己 的 包 庄 类 似 。 

在 TCP/IP 协议 中 ,对 于 通信 端口 ,有 不 同 的 分 类 方法 。 按 协议 类 型 划分 ,端口 可 以 分 
为 TCP、UDP、IP 和 ICMP(Internet 控制 消息 协议 ) 等 。 其 中 TCP 端口 和 UDP 端口 是 最 常 
见 的 端口 类 型 。 按 照 端 口号 分 布 划分 ,端口 分 为 知名 端口 (Well Known Ports) ,注册 端口 
(Registered Ports) 和 动态 和 /或 私有 端口 (Dynamic and/or Private Ports) 。 

所 谓 知 名 端口 (Well Known Ports) ,又 称 公 认 端 口 ,是 指 端口 号 范围 从 0 到 1023 的 端 
口 ,通常 这 些 端口 的 通信 明确 表明 了 某 种 服务 的 协议 ,不 可 再 重新 定义 它 的 作用 对 象 。 常 用 
知名 端口 有 : 21 端口 (FTP 服务 ), 25 端口 (SMTP 服务 ),53 端口 (DNS 服务 ),80 端口 
CHTTP 服务 ) ,110 端口 (POP3 服务 ) ,143 端口 (IMAP 服务 ) 。 

端口 号 范围 从 1024 到 65535 的 端口 统称 动态 端口 , 它 是 根据 通信 需要 ,系统 为 通信 程 
序 临时 分 配 的 端口 。 其 中 端口 号 从 1024 到 49151 的 部 分 又 称 为 注册 端口 (Registered 
Ports) ,这 些 端 口 松散 地 绑 定 于 一 些 服务 ,多 数 没有 明确 地 定义 服务 对 象 ,不 同 程序 可 根据 
实际 需要 自己 定义 。 例 如 ,远程 控制 软件 和 木马 程序 中 常会 有 这 些 端口 的 定义 。 在 上 网 浏 
览 中 ,操作 系统 会 动态 地 为 浏览 器 临时 分 配 端口 , 当 关 闭 浏览 器 窗口 时 ,端口 被 收回 。 

在 网 络 安全 中 ,木马 和 黑客 程序 均 是 通过 特定 的 端口 来 控制 计算 机 的 ,因此 ,通过 设置 
TCP/IP 的 筛选 可 以 容易 地 切断 黑客 或 木马 的 攻击 。 在 Windows 系统 中 ,利用 命令 行 命令 
“netstat-a-n” 可 查看 当前 系统 正在 进行 通信 和 的 协议 端口 ,也 可 以 安装 360 安全 卫士 ,查看 当 
前 的 通信 进程 及 所 使 用 的 端口 号 。 这 有 助 于 发 现 系统 是 否 有 木马 在 运行 。 

8. Web 2.0 

回想 Web 诞生 之 初 ,我们 面 对 的 是 一 个 个 静态 网 页 ,但 网 页 之 间 的 超 链接 ,以 及 浏览 器 
带 给 我 们 的 网 络 界 面 ,已 经 足够 令 我 们 兴奋 不 已 。 今 天 人 们 习惯 地 把 这 个 时 期 (2003 年 以 
前 的 互联 网 模式 ) 的 互联 网 称 为 Web 1.0。 在 Web 1.0 时 代 ,Netscape 脱颖而出 ,成 为 互联 
网 耀眼 的 新 星 , 它 的 浏览 器 ,把 广大 的 普通 用 户 带 和 人 了 互联 网 。 同 时 ,Yahoo 提出 了 互联 网 
黄页 ,Google 推出 了 深 受 欢迎 的 搜索 服务 :他们 为 互联 网 的 发 展 做 出 了 巨大 贡献 。 





@ 二 维 码 (2-dimensional bar code) ,又 称 二 维 条 码 它 是 用 某 种 特定 的 几何 图 形 按 一 定 规律 在 平面 (二 维 方向 上 ) 分 
布 的 黑白 相间 的 图 形 ,以 记录 数据 符号 信息 .通过 图 像 输 入 设备 或 光电 扫描 设备 自动 识 读 以 实现 信息 自动 处 理 。 二 维 码 
有 多 种 类 型 ,常见 的 有 堆 释 式 二 维 码 .矩阵 式 二 维 码 等 。 


随 着 网 络 的 发 展 ,网 站 的 拥有 者 发 现 , 只 有 网 民 的 参与 ,才能 持久 地 提高 与 保持 网 站 的 
人 气 。 从 一 开始 出 现 的 “论坛 "到 快速 火热 起 来 的 “博客 ”, 互 联网 事实 上 已 经 逐渐 开始 了 一 
种 理念 上 的 转变 ,实践 着 从 Web 1.0 到 Web 2.0 的 跨越 。 关 于 Web 2. 0, 并 没有 一 个 统一 
的 定义 , 它 通 常 是 指 注重 用 户 交 互 作用 ,强调 用 户 的 广泛 和 深入 参与 ,被 认为 是 下 一 代 软 件 
设计 模式 和 商业 模式 。Web 2. 0 理念 使 得 网 站 的 展现 形式 更 加 多 样 化 ,产生 了 很 多 的 典型 
产品 ,例如 : 论坛 ,名 人 博客 等 。 

9. 博客 (Blog) 

博客 的 全 名 是 Web log, 即 “网 络 日 志 ” 的 意思 ,后 来 缩写 为 Blog。Blog 是 继 E-mail、 
BBS ICQ 之 后 出 现 的 第 四 种 网 络 交流 方式 ,是 以 超级 链接 为 武器 的 网 络 日 记 , 代 表 着 一 种 
新 的 生活 方式 和 新 的 工作 方式 。 同 时 ,博客 (Blogger) 则 指 的 是 使 用 特定 的 软件 ,在 网 络 上 
出 版 .发表 和 张贴 个 人 文章 的 人 。 

从 技术 上 讲 , 一 个 Blog 就 是 一 个 网 页 , 它 通常 是 由 简短 且 经 常 更 新 的 帖子 所 构成 ,这 些 
张贴 的 文章 按照 年 份 和 日 期 倒序 排列 。Blog 的 内 容 和 目的 有 很 大 不 同 , 有 的 是 个 人 的 一 些 
评论 ,随笔 日记、 照片 等 ; 有 的 则 是 一 群 人 基于 某 个 特定 主题 的 集体 创作 。2002 年 8 月 ， 
“博客 中 国 ”(http://www. blogchina. com/) 网 站 开通 ,博客 ”现象 在 中 国 互 联网 界 出 现 。 

现在 ,许多 门户 网 站 (例如 新 浪 、 网 易 等 ) 都 提供 博客 功能 ,用 户 可 以 免费 注册 ,然后 就 可 
以 发 表 文 章 ( 博 文 ; 了 。 这 些 博文 通常 按照 博 主 或 专题 分 类 组 织 , 便 于 浏览 者 查看 ,读者 还 可 
以 对 文章 进行 评论 。 博 客 作为 一 种 新 的 表达 方式 , 它 不 仅 传播 情绪 ,还 包括 大 量 的 智慧 、 意 
见 和 思想 。 某 种 意义 上 说 , 它 也 是 一 种 新 的 文化 现象 ,博客 的 出 现 和 繁荣 ,真正 凸显 网 络 的 
知识 价值 ,标志 着 互联 网 发 展开 始 步 和 人 更 高 的 阶段 。 

10. 微 博 (MicroBlog) 

微 博 , 即 微 博客 (MicroBlog) 的 简称 , 它 是 一 个 基于 用 户 关系 的 信息 分 享 .传播 以 及 获取 
平台 ,用 户 可 以 通过 Web、WAP 以 及 各 种 客户 端 软 件 来 更 新 或 获取 信息 ,以 140 字 左 右 的 
文字 更 新 信息 ,并 实现 即时 分 享 。 最早 也 是 最 著名 的 微 博 是 美国 的 推 特 (twitter),2009 年 8 
月 份 ,新 浪 网 推出 新 浪 微 博 , 提 供 微 博 服务 , 微 博 正式 进入 中 文 上 网 主流 人 群 视 野 。 

和 博客 相 比 , 微 博 是 一 种 通过 关注 机 制 分 享 简短 实时 信息 的 广播 式 的 社交 网 络 平台 。 
它 具 有 可 以 单 向 或 双向 关注 机 制 . 内 容 简短 、 实 时 广播 的 特点 。2010 年 开始 , 微 博 像 雨 后 春 
敌 般 崛起 ,四 大 门户 网 站 均 开 设 微 博 服 务 。 

11. RSS 订阅 

网 络 信息 量 每 天 都 以 惊人 的 速度 增长 ,人 们 通常 以 搜索 引擎 的 方式 搜索 需要 的 信息 ,对 
于 扑面 而 来 的 新 闻 , 则 需要 花费 大 量 的 时 间 冲 浪 和 从 新 闻 网 站 下 载 。 即 使 如 此 ,还 是 有 大 量 
的 新 闻 或 信息 可 能 因为 没有 及 时 浏览 而 错过 。 

相对 于 传统 的 信息 浏览 ,RSS(Really Simple Syndication ,简易 信息 聚合 ) 订 阅 则 是 一 种 
全 新 的 资讯 传播 方式 , 它 采 用 推 技 术 将 订阅 的 页 面 发 送 到 客户 的 RSS 阅读 器 或 Web 浏览 
器 中 。 只 要 用 户 下 次 打开 RSS 阅读 器 ,或 支持 RSS 订阅 的 浏览 器 ,被 订阅 的 页 面 将 显示 在 
频道 列表 中 。 提 供 RSS 订阅 的 站 点 或 页 面 通常 被 标记 为 "XML 或 "RSS ”的 橙色 图 标 , 例 
如 ,网 易 RSS 订阅 中 心 (http://www. 163. com/rss/)。 

12. 微 信 (WeChat) 

微 信 是 腾讯 公司 于 2011 年 1 月 21 日 推出 的 一 个 为 智能 终端 提供 即时 通信 服务 的 免费 
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应 用 程序 , 微 信和 通过 互联 网 快速 发 送 免 费 语音 短信 视频、 图 片 和 文字 ,同时 ,也 可 以 使 用 通 
过 共享 流 媒体 内 容 的 资料 和 基于 位 置 的 社交 插件 “ 摇 一 摇 ”“ 漂 流 瓶 ”“ 朋 友 圈 “公众 平台 ” 
“语音 记事 本 ”等 服务 插件 。 

微 信和 最 常见 的 方式 是 使 用 智能 手机 联网 ,通过 添加 微 信 好 友 或 创建 微 信和 群 ,分 享 自己 的 
文章 或 转发 他 人 文章 。 此 外 ,在 使 用 电脑 上 网 浏览 时 ,网 页 新 闻 通常 在 页 面 的 顶部 ,提供 分 
享 机 制 ,例如 : 微 博 、 微 信 、QQ 空间 等 。 如 果 要 将 电脑 中 的 文章 分 享 到 微 信 朋友 圈 , 可 以 使 
用 微 信 的 “ 扫 一 扫 ” 功 能 ,通过 扫描 二 维 码 , 可 以 方便 快捷 地 将 网 页 分 享 到 微 信 朋 友 圈 ,加 快 
了 页 面 的 传播 。 

除 此 之 外 , 微 信 公 众 平台 和 公众 号 也 提供 订阅 功能 ,为 用 户 获 取信 息 提 供 更 加 广泛 的 信 
息 获取 渠道 。 值 得 注意 的 是 ,一 些微 商 通过 发 朋友 圈 , 也 给 人 们 带 来 了 一 定 的 麻烦 ,引起 人 
们 的 反感 。 但 其 通信 便利 和 不 断 开发 的 商业 应 用 应 验 了 互联 网 时 代 * 不 怕 做 不 到 ,就 怕 想 不 
到 ”的 名 言 。 





1.4 Web 相关 技术 


进入 20 世纪 90 年 代 以 后 , 随 着 互联 网 技术 的 不 断 发 展 ,特别 是 万 维 网 的 出 现 ,对 计算 
机 的 计算 模式 软件 开发 模式 、 应 用 模式 都 产生 了 重要 影响 ,以 浏览 器 /服务 器 三 层 架构 为 软 
件 架构 的 计算 机 应 用 成 为 主流 的 计算 机 应 用 模式 。 我 们 把 基于 B/S 三 层 架 构 的 计算 机 应 
用 系统 称 为 Web 系统 ,与 Web 系统 开发 及 应 用 相关 的 技术 统称 为 Web 技术 。 其 中 ,最 核 
心 的 技术 就 是 HTML 和 XML 标记 语言 和 Java 技术 ,XML 标记 语言 保证 了 数据 表达 的 平 
台 无 关 性 ,成 为 跨 平台 数据 交换 的 标准 ,Java 技术 提供 了 互联 网 中 程序 代码 的 平台 无 关 性 。 
1.4.1 标记 语言 

早 在 1969 年 互联 网 诞生 以 前 , 随 着 计算 机 技术 在 电子 出 版 印刷 行业 中 的 应 用 ,当时 美 
国 IBM 公司 的 研究 人 员 开 始 设计 一 种 名 为 通用 标记 语言 (Generalized Markup Language， 
GML) 的 语言 ,其 目标 是 对 电子 出 版 中 的 文档 结构 和 内 容 进 行 格式 定义 和 统一 标记 ,以 便 使 
用 计算 机 程序 进行 自动 化 处 理 。 

在 印刷 、 统 计 等 需要 大 规模 数据 处 理 的 行业 和 部 门 的 支持 下 ,这 项 研究 工作 持续 了 十 几 
年 ,于 1980 年 推出 了 标准 通用 标记 语言 (Standard Generalized Markup Language,SGML)， 
并 于 1986 年 获得 国际 标准 化 组 织 ISO 的 批准 。 为 了 满足 各 种 不 同 的 页 面 表达 需要 ,SGML 
设计 得 非常 复杂 ,SGML 的 正式 规范 达 500 多 页 ,因此 使 用 起 来 很 不 方便 ,使 得 它 未 能 得 到 
普及 和 大 规模 的 应 用 ,并 不 为 其 领域 之 外 的 人 们 所 广泛 了 解 。 虽 然 SGML 没有 被 广泛 应 
用 ,但 是 SGML 定义 了 标记 语言 的 基本 概念 , 竟 定 了 标记 语言 发 展 的 技术 基础 。 

1991 年 , 超 文 本 标记 语言 (HyperText Markup Language, HTML) 问世, 这 项 汲取 了 
SGML 灵感 的 创新 ,给 互联 网 中 的 资源 展示 带 来 了 一 次 革命 ,催生 了 WWW。 因 此 ,在 互联 
网 发 展 的 历史 上 ,HTML 被 称 为 互联 网 发 展 的 第 一 个 里 程 碑 。 什 么 是 HTML 呢 ? 简单 讲 ， 
HTML 是 一 种 数据 展示 技术 , 它 定义 了 一 组 标记 ,这 些 标记 标记 了 网 页 内 容 在 浏览 器 中 的 
显示 样式 ,从 而 保证 了 网 页 内 容 在 不 同 的 软 硬 件 平台 上 具有 一 致 的 外 观 , 这 是 一 个 革命 性 的 
创新 ,推动 了 互联 网 应 用 的 普及 。 


1996 年 8 月 ,那些 关心 SGML 的 专家 聚集 在 美国 西雅图 ,成 立 了 一 个 名 为 GCA 
(Graphic Communications Association, 图 形 通信 协会 ) 的 组 织 , 研 究 如 何 开 发 SGML 以 便 
它 适 应 和 促进 Web 技术 的 发 展 。 他 们 对 SGML 过 于 复杂 难于 被 理解 和 实现 的 方面 进行 简 
化 ,去 掉 其 语法 定义 部 分 ,适当 简化 DTD 部 分 ,并 增加 了 部 分 互联 网 的 特殊 成 分 。 为 了 体 
现 它 与 HTML 的 不 同 ,工作 组 将 其 命名 为 XML(eXtensible Markup Language) ,同时 也 将 
自身 更 名 为 XML 工作 组 。1998 年 2 月 10 日 ,XML 工作 组 正式 向 W3C 提交 了 XML 的 最 
终 推荐 标准 ,这 就 是 XML 1. 0 标准 。 

在 XML 中 ,SGML 的 最 初 动机 得 以 延续 ,文件 内 容 和 处 理 这 些 内 容 的 应 用 程序 实现 了 
分 离 ,在 文件 内 容 中 不 包含 数据 的 处 理 过 程 代码 ,文件 内 容 被 编码 为 条 理 清晰 的 文本 ,从 而 
便于 数据 交换 和 处 理 。 对 数据 进行 研究 有 着 重要 的 意义 ,因为 数据 往往 是 相对 稳定 的 ,变化 
的 通常 是 处 理 这 些 数 据 的 程序 。 实 现 数 据 和 操作 这 些 数据 的 程序 的 分 离 是 XML 的 设计 动 
机 ,这 是 深刻 理解 XML 的 基础 。 在 XML 中 ,如 果 XML 某 方面 设计 的 与 应 用 程序 太 过 紧 
密 , 就 可 以 认为 这 是 一 种 bug, 这 是 使 用 XML 最 重要 的 一 个 原则 。 

XML 标准 的 发 展 没 有 HTML 那样 迅速 ,直到 2002 年 10 月 15 日 , W3C 才 发 布 了 
XML 1.1 候选 推荐 标准 。 在 XML 1. 0 规范 中 ,使 用 的 字符 集 为 Unicode 2. 0。 随 着 
Unicode 版 本 的 升级 ,XML 1. 1 支持 新 的 Unicode 字符 ,不 再 局 限于 一 个 具体 的 Unicode 版 
本 。 此 外 ,在 XML 1.1 中 ,增加 了 IBM 大 型 主机 规定 的 换行 符 ( 并 x85: 十 六 进 制 的 85) 和 
Unicode 换行 符 (# x2028) 的 处 理 能 力 ,这 些 改变 都 提高 了 XML 的 国际 化 支持 水 平 。 

在 互联 网 中 ,对 于 标记 语言 XML 和 HTML, 虽 然 同 为 标记 语言 .但 是 两 者 的 定位 完全 
不 同 ,HTML 用 于 标记 内 容 在 浏览 器 中 的 显示 样式 ,是 一 种 数据 展示 技术 ,XML 则 是 一 种 
数据 表达 技术 ,通过 自 定义 标记 ,来 对 内 容 进行 语义 标记 ,从 而 使 得 文档 具有 语义 。 

在 XML 技术 中 ,其 核心 思想 是 实现 数据 和 显示 的 分 离 ,为 了 实现 文档 内 容 的 显示 、 查 
询 及 操作 等 应 用 ,在 XML 基础 上 ,还 定义 了 一 系列 相关 的 XML 应 用 语言 规范 ,例如 可 扩展 
样式 语言 XSL、XML 路 径 语 言 XPath、XML 查询 语言 XQuery ,可 扩展 连接 语言 XLL 以 及 
XML 文档 对 象 模 型 DOM 与 简单 应 用 程序 接口 SAX 等 ,通过 这 些 规范 来 实现 对 XML 文档 
的 显示 及 其 他 各 种 操作 。 

在 Web 相关 的 技术 中 ,可 以 说 ,标记 语言 是 互联 网 的 基石 ,HTML 是 互联 网 发 展 的 第 
一 个 里 程 碑 ,XML 代表 了 互联 网 的 未 来 , 它 不 仅 实现 了 数据 的 平台 无 关 性 ,还 是 语义 Web， 
语义 搜索 等 智能 应 用 的 基础 。 


1.4.2 Java 技术 


在 Java 技术 出 现 以 前 ,计算 机 系统 的 软件 开发 都 是 基于 操作 系统 的 ,不 同 操作 系统 下 开 
发 的 软件 互 不 兼容 ,软件 的 移植 性 是 一 个 不 可 逾越 的 山峰 。 直 到 1995 年 ,Sun Microsystems 


四 ”Sun Microsystems 公司 创立 于 1982 年 ,由 斯 坦 福 大 学 毕业 生 安 迪 。 贝克 托 森 (Andy Bechtolsheim) 和 斯 科 特 。 
马 可 尼 里 (Scott McNealy) 创 办 ,公司 名 字 取 斯 坦 福 大 学 网 络 (Stanford University Network) 的 首 字 母 缩写 。 公 司 成 立 后 
主要 致力 于 高 性 能 Sun 工作 站 以 及 基于 UNIX 的 服务 器 和 工作 站 网 络 的 研发 ,在 20 世纪 90 年 代 , 和 当时 的 集中 式 中 小 
型 机 和 终端 系统 构成 的 终端 网 络 相 比 ,具有 很 强 的 竞争 优势 。 在 高 峰 期 时 ,Sun 公司 在 全 球 拥有 5 万 员工 ,市 值 超过 
Google 和 IBM。2000 年 , 随 着 互联 网 泡沫 的 破灭 .公司 的 服务 器 工作 站 业务 急转直下 , 2009 年 4 月 20 日 ,Sun 
Microsystems 公司 ,这 个 在 行业 中 被 认为 是 同行 中 最 具 创造 性 的 企业 ,被 甲骨 文 (Oracle) 公 司 以 现金 收购 。 
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推出 Java 技术 ,Java 的 出 现 , 革 命 性 地 颠覆 了 传统 的 软件 开发 与 运行 模式 ,从 此 揭 开 了 网 络 
系统 开发 的 新 篇 章 。Java 技术 为 用 户 带 来 了 无 数 令 人 兴奋 的 可 能 性 , 它 几乎 使 所 有 应 用 程 
序 ( 包 括 游戏 .工具 和 服务 程序 ) 都 能 在 任何 计算 机 或 设备 上 运行 。 

什么 是 Java 技术 呢 ? 狭义 上 讲 ,Java 技术 可 以 理解 为 Java 语言 ,广义 上 讲 ,Java 技术 
包括 Java 语言 .Java 虚拟 机 以 及 Java API 等 。Java 技术 的 平台 可 移植 性 .多 功能 性 .有 效 
性 以 及 安全 性 使 它 成 为 网 络 计算 领域 最 完美 的 技术 。 今 天 ,Java 技术 已 经 无 处 不 在 ,从 桌 
面 PC 到 科学 超级 计算 机 和 互联 网 ,从 移动 电话 到 移动 手持 设备 ,从 家 庭 游戏 机 到 信用 卡 ， 
几乎 在 所 有 的 智能 设备 上 都 会 看 到 Java 技术 的 身影 。 

1. Java 的 出 现 

1990 年 ,Sun 计划 开拓 消费 类 电子 产品 市 场 ,他 们 认为 计算 机 技术 发 展 的 一 个 趋势 是 
数字 家 电 之 间 的 通信 。 为 此 ,Sun 成 立 了 一 个 软件 设计 团队 ,为 电视 、 烤 面包 箱 等 家 用 消费 
类 电子 产品 开发 一 个 分 布 式 代 码 系统 ,目的 是 可 以 通过 互联 网 与 家 电 产 品 进行 交互 ,以 便 对 
其 进行 控制 ,该 项 目 称 为 “绿色 计划 ”。 项 目 由 詹姆斯 高 斯 林 (James Gosling) ?负责 ,负责 
为 设备 和 用 户 之 间 的 交流 创建 一 种 能 够 实现 网 络 交互 的 语言 。 

开始 ,他 们 准备 用 C++ 语言 开发 ,但 是 ,C++ 太 复 杂 , 且 存在 安全 性 问题 。 于 是 在 1991 
年 6 月份 ,高 斯 林 开 始 准备 基于 C++ 开发 一 种 新 的 语言 ,看 着 窗外 的 一 棵 老 橡 树 ,就 将 这 个 
新 的 语言 命名 Oak, 他 就 是 Java 的 前 身 。Oak 是 一 种 用 于 网 络 的 精巧 而 安全 的 语言 ,在 一 
次 交互 式 电视 项 目 投标 中 ,Oak 失败 ,随后 几乎 销声匿迹 。 受 安德森 开发 Mosaic 和 
Netscape 浏览 器 的 启发 ,他 们 将 Oak 继续 完善 。 因 为 此 时 发 现在 此 之 前 Oak 已 是 Sun 公 
司 另 一 个 语言 的 注册 商标 ,他 们 将 新 的 Oak 改名 为 Java, 即 太平 洋 上 一 个 盛产 咖啡 的 岛屿 
(爪哇 岛 ) 的 名 字 , 从 此 ,一 杯 冒 着 热气 的 咖啡 (总 ) 成 为 了 Java 技术 的 标志 。 

高 斯 林 在 开始 写 Java 时 ,并 不 局 限于 扩充 语言 机 制 本 身 ,更 注重 于 语言 所 运行 的 软 硬 
件 环境 。 他 要 建立 一 个 系统 ,这 个 系统 运行 于 一 个 巨大 的 ,分 布 的 、 异 构 的 网 格 环境 中 ,完成 
各 种 电子 设备 之 间 的 通信 与 协同 工作 。 高 斯 林 在 设计 中 采用 了 虚 机 器 码 (Virtual Machine 
Code) 方 式 , 即 Java 语言 编译 后 产生 的 是 虚 机 器 码 , 虚 机 器 码 运 行 在 一 个 解释 器 上 ,每 一 个 
操作 系统 均 有 一 个 解释 器 。 这 样 一 来 ,Java 就 成 了 平台 无 关 语 言 ,这 和 高 斯 林 设 计 的 Sun 
NeWS 网 络 窗口 系统 9 有 着 相同 的 技术 味道 。 在 NeWS 中 ,用 户 界面 统一 用 Postscript 描 
述 ,不 同 的 显示 器 有 不 同 的 Postscript 解释 器 ,这 样 便 保证 了 用 户 界面 良好 的 可 移植 性 。 

经 过 17 个 月 的 奋战 ,整个 系统 胜利 完成 。 它 是 由 一 个 操作 系统 、 一 种 语言 (Java) 一 个 
用 户 界面 .一 个 新 的 硬件 平台 .三 块 专用 芯片 构成 的 。 项 目 完成 后 ,在 Sun 公司 内 部 做 了 一 
次 展示 和 鉴定 ,观众 的 反映 是 : 在 各 方面 都 采用 了 办 新 的 .非常 大 胆 的 技术 。 


@ 詹姆斯 。 高 斯 林 (James Gosling) ,加拿大 人 ,Java 编程 语言 的 共同 创始 人 之 一 ,一 般 公 认 他 为 “Java 之 父 ”。 
1983 年 在 美国 卡 内 基 梅 隆 大 学 获 计算 机 科学 博士 学 位 ,毕业 后 到 IBM 工作 ,设计 IBM 第 一 代 工 作 站 。1984 年 加 盟 Sun 
公司 ,是 Sun 扩充 网 络 窗口 系统 NeWS(Network/extensible Window System) 的 总 设计 师 , 也 是 第 一 个 用 C 实现 的 
EMACS 文本 编辑 器 COSMACS 的 开发 者 。 

加 窗口 系统 (Window system) 是 UNIX 服务 器 /工作 站 结构 的 概念 ,在 早期 的 UNIX 网 络 中 ,大 型 的 软件 通常 部 署 
在 服务 器 上 ,用 户 通过 网 络 终端 连接 服务 器 ,运行 服务 器 中 的 软件 。 这 些 软件 运行 的 结果 需要 在 用 户 终 端 显示 ,如 何 将 
运行 结果 在 不 同 的 终端 显示 呢 ? 通过 不 同 的 终端 安装 相应 的 驱动 程序 ,接收 服务 器 上 的 数据 ,这 些 数据 与 显示 无 关 , 具 
体 的 显示 由 终端 来 处 理 ,这 就 实现 了 数据 和 显示 的 分 离 。 


2. Java 语言 环境 

1994 年 ,WWW 已 如 火 如 蔡 地 发 展 起 来 。 高 斯 林 意 识 到 WWW 需要 一 个 中 性 的 浏览 
器 , 它 不 依赖 于 任何 硬件 平台 和 软件 平台 。 于 是 他 决定 用 Java 开发 一 个 新 的 Web 浏览 
1994 年 秋 Web Runner 研发 完成 ,后 改名 为 Hot Java, 并 于 1995 年 5 月 23 日 发 表 , 在 产业 
界 引起 了 巨大 骏 动 ,Java 的 地 位 也 随 之 得 到 肯定 。Hot Java 浏览 器 具有 兢 新 的 Java Applet 
功能 ,让 网 页 更 有 动感 ,为 了 让 其 他 浏览 器 支持 Java Applet, Sun 发 布 了 相应 的 Java 插件 。 
在 一 般 的 页 面 浏览 方面 ,Hot Java 浏览 器 并 不 优越 ,人 们 更 愿意 使 用 网 景 的 导航 者 浏览 器 
和 微软 的 IE 浏览 器 ,因此 ,Hot Java 浏览 器 没有 得 到 普及 ,1999 年 Sun 公司 宣布 停止 Hot 
Java 浏览 器 的 后 续 发 展 。 

在 1995 年 Sun 虽然 推出 了 Java, 但 这 只 是 一 种 语言 ,而 要 想 开发 复杂 的 应 用 程序 , 必 
须要 有 一 个 强大 的 开发 库 支持 。 因 此 ,又 经 过 一 年 的 试用 和 改进 ,Sun 在 1996 年 1 月 23 日 
发 布 了 JDK 1.0。 这 个 版 本 包括 了 两 部 分 : 运行 环境 (Java Running Environment,JRE) 和 
开发 环境 (Java Development Kit,JDK) 。 在 运行 环境 中 包括 了 核心 API, 集 成 API, 用 户 界 
面 API, 发 布 技术 ,Java 虚拟 机 (Java Virtual Machine.JVM)5 个 部 分 。 开 发 环境 主要 是 
Java 程序 编译 器 ( 即 javac) ,负责 将 Java 源 程序 编译 成 虚 机 器 码 。 

1997 年 2 月 18 日 ,Sun 发 布 了 JDK 1.1。JDK 1.1 相对 于 JDK 1.0 最 大 的 改进 就 是 为 
JVM 增加 了 JIT( 即 时 编译 ?编译 器 。JIT 和 传统 的 编译 器 不 同 ,传统 的 编译 器 是 编译 一 条 ， 
运行 完 后 再 将 其 扔 掉 ,而 JIT 会 将 经 常用 到 的 指令 保存 在 内 存 中 ,在 下 次 调用 时 就 不 需要 再 
编译 了 ,这 样 JDK 在 效率 上 有 了 非常 大 的 提升 。 

随后 ,一 些 著 名 的 计算 机 公司 纷纷 购买 了 Java 的 使 用 权 , 如 IBM、Apple、DEC、Adobe、 
Silicon Graphics\HP Oracle Toshiba、Netscape 和 Microsoft 等 大 公司 相继 购买 了 Java 的 
许可 证 。 另 外 ,众多 的 软件 开发 商 也 开发 了 许多 支持 Java 的 软件 产品 。 在 以 网 络 为 中 心 的 
计算 时 代 , 不 支持 HTML 和 Java, 就 意味 着 应 用 程序 的 应 用 范围 只 能 限于 同 质 的 环境 。 

Java 的 平台 无 关 性 给 未 来 的 计算 模式 产生 了 革命 性 的 影响 , 它 是 继 HTML 后 ,互联 网 
发 展 的 又 一 个 里 程 碑 。 

3. Java 的 技术 特征 

在 Sun 的 Java 语言 白皮书 中 ,说 明 Java 语言 有 如 下 特征 : 简单 、 面 向 对 象 、 分 布 式 、 解 
释 执 行 ,健壮 、 安 全 ,体系 结构 中 立 、 可 移植 、 高 性 能 、 多 线程 ,动态 性 …… a 

(1) 简单 (Simple) 。 主 要 体现 在 三 个 方面 : DJava 语言 风格 来 源 于 C++ ,因此 C++ 程序 
员 可 以 很 快 地 上 手 。@Java 据 弃 了 C++ 中 容易 引发 错误 的 地 方 ,如 指针 ,增加 了 内 存 管理 
等 一 些 新 的 特色 。@Java 提供 了 丰富 的 类 库 ,使 用 户 编程 更 加 简单 。 

(2) 面向 对 象 (Object Oriented)。Java 是 面向 对 象 的 语言 , 据 弃 了 C++ 中 全 局 变量 等 
与 面向 对 象 思想 冲突 的 内 容 。 

(3) 体系 结构 中 立 (Architecture Neutral) 。 一 般 情况 下 ,网 络 环境 都 是 异 构 的 ,如 何 使 
一 个 应 用 程序 能 够 在 不 同 硬 件 . 不 同 操作 系统 平台 的 计算 机 上 运行 ,始终 是 一 个 难题 。Java 
将 它 的 程序 编译 成 一 种 结构 中 立 的 中 间 文 件 格式 ,由 Java 虚拟 机 来 解释 执行 这 种 中 间 代 
码 。 从 而 使 得 Java 应 用 程序 可 以 在 不 同 的 处 理 器 中 执行 。 

(4) 解释 执行 (Interpreted)。Java 解释 器 能 直接 地 在 任何 机 器 上 执行 Java 字 节 码 
(Byte codes) 文 件 。 
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(5) 可 移植 (Portable) 。 同 体系 结构 无 关 的 特性 使 Java 程序 可 以 在 配备 了 Java 虚拟 机 
的 任何 计算 机 系统 上 运行 。 另 外 ,通过 定义 独立 于 平台 的 基本 类 型 及 其 运算 ,Java 数据 得 
以 在 任何 硬件 平台 上 保持 一 致 

(6) 分 布 式 (Distributed) 。Java 程序 的 程序 库 可 以 很 容易 地 与 HTTP 等 TCP/IP 协议 
配合 ,从 而 使 Java 程序 可 以 凭借 URL 打开 并 访问 网 络 对 象 。 对 程序 员 来 讲 ,访问 方式 和 访 
问 本 地 文件 系统 几乎 一 样 , 这 就 为 Internet 等 分 布 环境 提供 内 容 带 来 了 方便 。 

(7) 安全 性 (Secure) 。Java 是 被 设计 用 于 网 络 和 分 布 式 环境 的 ,安全 性 是 一 个 重要 的 
考虑 因素 。Java 的 安全 性 可 以 从 两 个 方面 考虑 : 四 内 存 的 安全 性 ,如 据 弃 了 C++ 中 的 指针 ， 
从 而 避免 了 非法 内 存 操作 和 内 存 泄漏 。@ 当 用 Java 来 创建 浏览 器 内 容 时 ,语言 功能 和 浏览 
器 本 身 的 功能 结合 ,使 它 更 安全 。 

4. Java 的 发 展 

从 Java 技术 诞生 之 日 起 , 它 的 创意 灵感 和 为 实现 平台 无 关 性 所 追求 的 “编写 一 次 ,到 处 
运行 ”的 理念 ,就 注定 了 其 未 来 的 鞍 勃 发 展 。1995 年 ,Java 开发 包 JDK 1.0 的 发 布 , 英 定 了 
Java 实用 发 展 的 根基 ,即使 在 2009 年 Sun 被 Oracle 收购 后 ,Java 的 发 展 也 从 未 放 慢 前 进 的 
脚步 。 相 比 最 早 的 JDK 1.0 只 有 一 个 抽象 窗口 工具 包 (Abstract Windowing Toolkit， 
AWT), 它 是 一 种 用 于 开发 图 形 用 户 界面 的 API, 并 无 其 他 类 库 。 今 天 的 JDK ,Java 为 开发 
人 员 提 供 的 类 库 越 来 越 丰富 ,功能 也 越 来 越 强大 ,Java 开发 已 经 遍及 各 个 领域 。 

1998 年 12 月 4 日 ,Sun 发 布 了 Java 历史 上 最 重要 的 一 个 JDK 版 本 , 即 JDK 1.2, 这 个 
版 本 标志 着 Java 进入 了 Java 2 时 代 , 进 入 Java 的 飞速 发 展 时 期 。 在 Java 2 时 代 ,Sun 对 
Java 进行 了 很 多 革命 性 的 改变 ,Sun 将 JDK 1. 2 一 分 为 三 ,Java 被 分 成 了 J2EE(Java2 
Platform，Enterprise Edition)、J2SE(Java2 Platform，Standard Edition) 和 J2ME(Java 2 
Platform，Micro Edition) ,分 别 面向 企业 级 、 桌 面 .嵌入 式 和 移动 计算 等 领域 。 

2000 年 5 月 8 日 ,经 过 两 年 的 研发 ,Sun 对 JDK 1.2 进行 了 重大 升级 ,推出 了 JDK 1.3。 
Sun 在 JDK 1.3 中 同样 进行 了 大 量 的 改进 ,主要 表现 在 一 些 类 库 上 (如 数学 运算 、 新 的 
Timer API 等 ) ,在 JNDI 接口 方面 增加 了 DNS 支持 ,增加 了 JNI 支持 等 。 

2002 年 2 月 13 日 ,Sun 发 布 了 JDK 历史 上 最 为 成 熟 的 版 本 JDK 1.4。 这 次 Sun 将 主 
要 精力 放 到 了 Java 的 性 能 上 ,使 JDK 1.4 的 性 能 有 了 质 的 飞跃 。 到 JDK 1. 4 为 止 ,我 们 已 
经 可 以 使 用 Java 实现 大 多 数 的 应 用 了 。 

虽然 从 JDK 1.4 开始 ,Java 的 性 能 有 了 显著 的 提高 ,但 Java 又 面临 着 另 一 个 问题 , 那 就 
是 复杂 。 在 2004 年 10 月 ,Sun 发布 了 JDK 1.5, 同 时 ,Sun 将 JDK 1.5 改 名 为 J2SE 5.0。 
与 JDK 1.4 不 同 ,JDK 1.4 的 主题 是 性 能 ,而 J2SE 5.0 的 主题 是 易 用 。 

2006 年 4 月 ,Sun 推出 J2SE 6.0 测试 版 ,2006 年 12 月 .代号 为 Mustang( 野 马 ) 的 J2SE 
6.0 正式 版 推 向 市 场 , 在 性 能 、 易 用 性 方面 得 到 了 前 所 未 有 的 提高 。2006 年 12 月 ,Sun 公司 
发 布 JRE 6. 0,Java 技术 发 展 到 一 个 新 的 高 度 。Java 在 性 能 、 跨 平台 方面 的 优势 , 随 着 易 用 
性 的 改善 ,成 为 网 络 开发 的 首选 开发 工具 。 

2009 年 4 月 20 日 ,Oracle 和 Sun 公司 发 布 联合 声明 .Oracle 收购 了 Sun 公司 。Sun 这 
个 让 全 球 软件 开发 者 曾 热 血 沸腾 、 视 为 心灵 家 园 的 企业 ,这 个 曾 提 出 “网 络 即 计算 机 ”战略 方 
向 ,以 及 为 世界 贡献 了 一 整套 包括 Java 在 内 的 全 系列 开源 软件 的 硅谷 高 科技 公司 ,就 这 样 
在 历史 的 长 河中 消失 了 。 


当 Sun 融 入 Oracle 后 ,Java 的 发 展 并 未 停滞 。 经 过 了 几 年 的 磨合 ,2011 年 7 月 ,在 
Java 6 发 布 5 年 后 ,Java 7 姗 姗 来 迟 。3 年 后 ,Oracle 在 2014 年 3 月 19 日 发 布 了 Java 8 正 
式 版 。 虽 然 JDK 8 做 了 大 量 的 改进 ,很 多 原 有 类 都 做 了 变更 ,但 依然 支持 与 以 往 版 本 的 兼 
容 。2017 年 9 月 21 日 ,Java 9 正式 发 布 。 在 Oracle 的 官方 网 站 (http://http://www. 
oracle. com/) 上 ,用 户 可 以 免费 下 载 Linux、Mac OS,、Solaris 和 Windows 等 不 同 操作 系统 下 
的 各 种 Java 编程 语言 版 本 ,包括 JDK 和 JRE。 


1.4.3 Web 服务 


在 Internet 的 发 展 过 程 中 , Web 应 用 系统 越 来 越 多 ,利用 HTML、CGI 等 Web 技术 可 
以 轻松 地 在 Internet 环境 下 实现 电子 商务 .电子 政务 等 各 种 Web 应 用 系统 。 和 传统 的 在 操 
作 系 统 下 的 可 执行 程序 相 比 ,运行 在 互联 网 上 的 Web 系统 其 前 端 和 后 端 程序 并 不 是 紧密 地 
联结 成 一 个 统一 的 . exe 文件 ,而 是 分 散在 不 同 的 网 页 文件 中 的 。 

对 于 软件 系统 的 开发 ,我 们 总 是 追求 最 大 程度 的 代码 重用 ,以 提高 我 们 的 软件 开发 效 
率 、 代 码 质量 和 系统 运行 效率 。 函 数 库 、 类 库 都 是 这 种 想法 的 具体 实现 ,软件 编程 人 员 通 过 
在 自己 的 程序 中 编写 函数 调用 语句 ,来 分 享 了 这 些 函 数 人 代码。 程序 连 接 器 静态 或 动态 地 将 
这 些 库 函数 和 用 户 的 程序 代码 连接 成 一 个 统一 的 可 执行 程序 ,最 终 在 计算 机 操作 系统 中 
运行 。 

在 传统 意义 下 ,上 述 的 软件 开发 模式 实现 了 二 进 制 代码 级 的 重用 , 它 无 疑 是 成 功 的 , 通 
过 编写 那些 具有 共性 的 库 函 数 ,可 以 为 编程 人 员 带 来 标 称 效 率 上 的 提高 。 但 是 ,在 互联 网 环 
境 下 ,这 样 的 二 进 制 代码 重用 ,有 了 新 的 发 展 ,我 们 看 下 面 的 例子 。 

假设 开发 人 员 需 要 搭建 一 个 商务 网 站 ,这 个 网 站 需要 一 个 验证 客户 合法 身份 的 功能 。 
为 了 实现 这 个 功能 ,我 们 会 想到 下 面 两 种 不 同 的 实现 方法 : 

(1) 由 开发 人 员 自 己 编写 安全 验证 所 需 的 全 部 程序 代码 ,这 包括 用 户 数据 的 管理 和 查 
询 等 维护 功能 。 

(2) 购买 这 段 程序 (通常 是 一 个 ActiveX 组 件 ) 。 购 买 一 个 可 以 进行 身份 验证 功能 的 组 
件 , 将 具有 相应 功能 的 组 件 注册 在 自己 的 机 器 上 ,然后 根据 组 件 类 型 库 产生 接口 文件 。 在 实 
际 编程 中 就 可 以 使 用 这 个 接口 文件 来 访问 组 件 服务 。 

在 上 述 的 设计 中 ,虽然 我 们 可 以 购买 功能 代码 ,但 对 所 需 数据 的 管理 依然 是 存在 的 ,或 
许 我 们 需要 在 系统 中 建立 一 份 完 整 的 客户 数据 表 ,而 这 份 数据 表 在 别 的 系统 中 也 会 用 到 或 
会 发 生变 化 。 这 就 导致 不 同 的 系统 中 ,需要 对 这 些 信 息 进 行 同步 ,否则 将 导致 数据 的 不 一 
致 。 这 是 一 个 复杂 的 问题 ,如 果 能 够 把 功能 和 数据 一 起 进行 抽象 ,独立 成 一 个 业务 单元 , 问 
题 就 可 以 解决 了 ,这 便 导 致 了 Web 服务 概念 的 产生 。 

1，Web 服务 的 概念 

什么 是 Web 服务 呢 ? 所谓 Web 服务 (Web service) . 它 是 组 件 技术 在 Internet 中 的 延 
伸 , 从 本 质 上 讲 是 放置 于 网 络 上 的 可 重用 构件 ,或 者 说 是 一 个 可 以 远程 调用 的 类 或 组 件 。 从 
更 高 的 概念 层面 讲 , 可 以 将 Web 服务 视 为 一 些 工作 单元 ,每 个 单元 处 理 特 定 的 功能 任务 以 
及 相关 的 数据 。 再 往 上 一 步 ,可 以 将 这 些 任务 组 合成 面向 业务 的 任务 ,以 处 理 特定 的 业务 操 
作 任 务 , 从 而 使 非 技 术 人 员 去 考虑 一 些 应 用 程序 ,这 些 应 用 程序 可 以 在 Web 服务 应 用 程序 
工作 流 中 一 起 处 理 业务 问题 。 因 此 ,一 旦 由 技术 人 员 设 计 并 构建 好 Web 服务 之 后 ,业务 流 
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程 架构 设计 师 可 以 聚集 这 些 Web 服务 来 解决 业务 层面 上 的 问题 。 

可 见 , Web 服务 是 基于 互联 网 的 一 种 新 型 软件 开发 模式 ,在 该 模式 下 ,传统 的 软件 功能 
模块 不 再 以 函数 方式 提供 以 实现 二 进 制 代码 级 的 重用 ,而 是 被 封装 成 Web 服务 ,实现 业务 
级 的 重用 和 集成 ,业务 所 需 数据 被 封装 在 Web 服务 中 ,而 无 须 在 具体 的 各 调用 模块 中 复制 
同样 的 数据 ,使 系统 的 维护 更 加 简单 。 

2. 基于 Web 服务 的 软件 开发 模式 

基于 Web 服务 的 思想 ,对 于 上 述 的 客户 合法 身份 验证 功能 ,可 以 封装 成 一 个 Web 服 
务 , 在 互联 网 上 注册 和 发 布 ,我 们 的 应 用 系统 只 需要 在 自己 的 程序 中 通过 访问 该 服务 的 
URL 地 址 使 用 该 服务 即 可 。 使 用 该 模式 ,这 个 服务 并 不 运行 在 用 户 的 机 器 上 ,而 是 运行 在 
服务 提供 者 的 服务 器 上 。 

基于 Web 服务 的 软件 开发 模式 如 图 1-3 所 示 。 
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图 1-3 基于 Web 服务 的 软件 开发 模式 


在 互联 网 中 ,使 用 Web 服务 ,需要 在 用 户 应 用 系统 和 Web 服务 间 建 立 一 套 通 信和 机制 或 
协议 ,以 保证 系统 各 部 分 的 统一 运行 。 开 发 人 员 可 以 使 用 像 过 去 创建 分 布 式 应 用 程序 时 使 
用 组 件 的 方式 ,创建 由 各 种 来 源 的 Web 服务 组 合 在 一 起 的 应 用 程序 。 

3. Web 服务 体系 架构 

在 基于 Web 服务 的 Web 系统 架构 中 ,各 部 分 之 间 的 通信 是 系统 工作 的 基础 。 在 互联 
网 中 ,因为 XML 技术 具有 强大 的 数据 表达 能 力 和 平台 无 关 性 ,因此 ,基于 XML, 可 以 构建 
各 部 分 之 间 的 通信 协议 ,主要 有 简单 对 象 访问 协议 (Simple Object Access Protocol， 
SOAP) 、 服 务 描 述 语 言 (Web Service Description Language, WSDL)、 通 用 描述 发 现 和 集成 
协议 (Universal Description Discovery & Integration, UDDI) 。 

Web 服务 的 体系 结构 由 三 个 参与 者 和 三 个 基本 操作 构成 。 三 个 参与 者 分 别 是 服务 提 
供 者 、 服 务 请 求 者 和 服务 代理 ,三 个 基本 操作 分 别 为 发 布 (publish)、 查 找 (find) 和 绑 定 
(bind) ,关系 如 图 1-4 所 示 。 

服务 提供 者 将 其 服务 发 布 到 服务 代理 的 一 个 目录 上 ; 当 服 务 请 求 者 需要 调用 该 服务 
时 ,首先 利用 服务 代理 提供 的 目录 去 搜索 该 服务 .得 到 如 何 调用 该 服务 的 信息 ; 然后 根据 这 
些 信息 去 调用 服务 提供 者 发 布 的 服务 。 当 服务 请 求 者 从 服务 代理 得 到 调用 所 需 服务 的 信息 
之 后 ,通信 是 在 服务 请 求 者 和 提供 者 之 间 直 接 进 行 ,而 无 须 经 过 服务 代理 。 

4. Web 服务 相关 技术 标准 

在 基于 Web 服务 的 软件 体系 架构 中 :各 部 分 之 间 的 通信 都 是 通过 可 扩展 标记 语言 
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图 1-4 Web 服务 体系 结构 


XML 进行 描述 的 ,XML 语言 不 是 一 种 编程 语言 或 者 API, 而 是 一 种 独立 于 平台 的 组 织 数据 
的 方式 。XML 的 语法 便于 通过 编程 来 处 理 文本 数据 ,同时 又 便于 为 人 们 所 理解 。Web 服 
务 使 用 XML 作为 标准 ,在 网 络 设备 之 间 进 行 通信 。 

主要 的 通信 标准 如 下 : 

(1) 简单 对 象 访问 协议 (Simple Object Access Protocol,SOAP)。SOAP 是 在 分 散 或 分 
布 式 环境 中 交换 信息 的 简单 协议 ,开发 人 员 可 以 使 用 这 种 独立 于 平台 的 机 制 ,远程 调用 分 布 
式 对 象 的 方法 。SOAP 消息 的 通信 使 用 XML 来 描述 对 象 .方法 以 及 执行 的 参数 。 客 户 机 
和 服务 器 都 可 以 实现 和 使 用 SOAP。 

相对 于 传统 的 公共 对 象 请 求 代 理 体 系 结 构 (Common Object Request Broker 
Architecture ,CORBA) 和 分 布 式 组 件 对 象 模 型 标准 (Component Object Model/Distributed 
Component Object Model,COM/DCOM) ,SOAP 采用 HTTP 作为 底层 通信 协议 , RPC 作 
为 一 致 性 的 调用 途径 ,XML 作为 数据 传送 的 格式 ,允许 服务 提供 者 和 服务 客户 经 过 防火 墙 
在 Internet 进行 通信 交互 ,可 以 说 SOAP=HTTP 十 RPC+XML。 

(2) Web 服务 描述 语言 (Web Service Description Language, WSDL)。WSDL 是 用 
XML 文档 来 描述 Web 服务 的 标准 ,是 Web 服务 的 接口 定义 语言 , 它 从 句法 层面 对 Web 服 
务 的 功能 进行 描述 ,包括 Web 服务 的 三 个 基本 属性 : 四 服务 做 些 什么 , 即 服务 所 提供 的 操 
作 方 法 。@ 如 何 访 问 服务 , 即 和 服务 交互 的 数据 格式 以 及 必要 协议 。@ 服 务 位 于 何 处 , 即 协 
议 相 关 的 地 址 ,如 URL。 

(3) 通用 描述 发 现 和 集成 协议 (Universal Description, Discovery, and Integration， 
UDDD 。 它 是 为 解决 Web 服务 的 发 布 和 发 现 而 制订 的 基于 互联 网 的 电子 商务 技术 标准 , 包 
含 一 组 基于 Web 的 、 分 布 式 的 Web 服务 信息 注册 中 心 的 实现 标准 ,以 及 一 组 使 企业 能 将 自 
己 提 供 的 Web 服务 注册 到 该 中 心 的 实现 标准 。UDDI 定 义 了 一 组 基于 SOAP 消息 的 公用 
SOAP API, 用 户 利用 SOAP 消息 来 查找 和 注册 Web 服务 ,并 为 应 用 程序 提供 接口 来 访问 
注册 中 心 。 

服务 注册 (Service Registry) 是 一 种 服务 代理 . 它 是 在 UDDI 上 需要 发 现 服务 的 请 求 者 
和 发 布 服务 的 提供 者 之 间 的 中 介 。 当 请 求 者 决定 使 用 特定 的 服务 时 ,通常 以 借助 于 开发 工 
具 ( 如 Microsoft Visual Studio . NET) 创 建 并 发 送 服务 请 求 .然后 处 理 响应 的 方式 访问 服务 
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的 代码 来 绑 定 服务 。 

(4) 语义 Web 服务 标记 语言 (Ontology Web Language for Services,OWL-S) 。OWL-S 
是 语义 Web 服务 标记 语言 的 标准 , 它 比 WSDL 更 能 向 用 户 提供 可 理解 的 服务 资源 的 描述 
形式 ,提高 服务 选取 与 推荐 的 准确 性 。 语 义 Web 服务 的 主要 方法 是 利用 本 体 (Ontology) 来 
描述 Web 服务 ,然后 通过 这 些 带 有 语义 信息 的 描述 实现 Web 服务 来 实现 服务 的 自动 发 现 ， 
调用 和 组 合 。 语 义 Web 和 Web 服务 是 语义 Web 服务 的 两 大 支撑 技术 。OWL-S 是 连接 两 
大 技术 的 桥梁 ,目前 对 语义 Web 服务 标记 语言 研究 最 重要 的 组 织 就 是 DARPA 组 织 , 其 研 
究 组 OWL Services Coalition 提出 了 语义 Web 服务 标记 语言 OWL-S。 

5. Web 服务 技术 优势 

总 结 Web 服务 技术 ,有 如 下 技术 优势 : 

(1) 平台 无 关 、 语 言 无 关 性 , Web 服务 技术 的 主要 目标 是 在 现 有 的 各 种 异 构 平台 的 基础 
上 构筑 一 个 通用 的 平台 无 关 、 语 言 无 关 的 技术 层 . 各 种 不 同 平台 之 上 的 应 用 可 以 依靠 这 个 技 
术 层 来 实施 彼此 的 连接 和 集成 。 

(2) 自 描述 能 力 ,Web 服务 的 所 有 协议 ,包括 SOAP、WSDL、UDDI 都 是 XML 文档 ,所 
以 Web 服务 具有 自 描述 的 良好 性 质 。 

(3) 松 耦 合 性 , 当 一 个 Web 服务 的 实现 发 生变 更 时 ,调用 者 是 不 会 感到 这 一 点 的 。 对 
于 调用 者 来 说 ,只 要 Web 服务 的 调用 接口 不 变 , Web 服务 实现 的 任何 变更 对 他 们 来 说 都 是 
不 透明 的 ,甚至 当 Web 服务 的 实现 平台 从 J2EE 迁移 到 . NET 或 者 是 相反 的 迁移 流程 ,用 户 
都 可 以 对 此 一 无 所 知 。 

(4) 易于 集成 ,由 于 Web 服务 采用 简单 的 , 易 理 解 的 标准 Web 协议 作为 组 件 界面 描述 
和 协同 描述 规范 ,完全 屏蔽 了 不 同 软件 平台 的 差异 ,无 论 是 CORBA、DCOM 还 是 EJB 都 可 
以 通过 这 一 种 标准 的 协议 进行 互 操作 ,实现 了 在 当前 环境 下 最 高 的 可 集成 性 。 

(5) 用 消息 传递 代替 传统 的 APIs。Web 服务 采用 了 SOAP 协议 。SOAP 协议 独立 于 
平台 ,可 以 在 不 同 的 平台 、 环 境 下 进行 传递 和 交互 。 


1.5 Web 应 用 与 发 展 趋势 


Web, 这 个 由 无 以 计数 的 超 链接 形成 的 网 络 世界 ,在 给 我 们 每 一 个 人 的 工作 、 学 习 、 生 活 
和 娱乐 带 来 了 无 穷 便 利和 全 新 生命 体验 的 同时 ,新 的 技术 、 新 的 理念 新 的 应 用 不 断 出 现 , 让 
我 们 对 Web 的 未 来 充满 了 无 限 遐 想 。 


1.5.1 B/S 计算 模式 


在 Web 出现 以 前 ,计算 机 的 应 用 模式 经 历 了 单机 应 用 到 网 络 应 用 两 个 阶段 ,这 些 不 同 
的 计算 模式 有 各 自 的 优点 和 不 足 。Web 的 出 现 使 得 一 种 围绕 Web 服务 的 计算 模式 成 为 当 
前 计算 机 应 用 的 主流 模式 ,并 推动 了 软件 开发 .软件 应 用 、 应 用 集成 方式 上 的 重大 改变 。 

1. 集中 式 计算 模式 

20 世纪 50 年 代 , 在 计算 机 诞生 和 应 用 的 初期 ,计算 所 需要 的 数据 和 程序 都 集中 在 一 台 
计算 机 上 , 称 为 集中 式 计 算 。 随 着 计算 机 硬件 的 发 展 ,这 种 集中 式 计 算 往 往 形 成 一 种 由 大 型 
机 和 若干 与 之 相连 的 终端 组 成 的 终端 式 网 络 结构 。 终 端 式 网 络 并 不 是 现代 意义 上 的 计算 机 





网 络 ,所 有 的 计算 都 是 在 大 型 主机 上 完成 的 ,运行 UNIX 多 用 户 操作 系统 ,而 终端 是 一 种 哑 
终端 ,没有 CPU 等 计算 资源 ,只 有 键盘 和 显示 器 ,负责 程序 运行 中 所 需要 的 数据 输入 与 
输出 。 

在 计算 机 发 展 初期 ,计算 机 价格 昂贵 ,集中 式 计 算 对 于 充分 利用 大 型 主机 资源 发 挥 了 积 
极 作用 。 从 现代 的 观点 看 ,大 型 机 自 项 向 下 的 维护 和 管理 方式 也 具有 特定 优越 性 。 它 具有 
安全 性 好 .可靠 性 高 .计算 能 力 和 数据 存储 能 力 强 以 及 系统 维护 和 管理 费用 较 低 等 优点 。 今 
天 ,集中 式 计算 的 需求 依然 存在 ,例如 .对 于 价格 昂贵 的 高 性 能 计算 机 ,因为 初始 投资 较 大 ， 
不 可 能 广泛 部 署 。 这 种 模式 的 不 足 是 显而易见 的 ,例如 程序 的 移植 性 差 ,资源 利用 率 低 等 。 

2. 客户 /服务 器 (C/S) 计 算 模式 

20 世纪 80 年 代 , 随 着 微型 计算 机 的 发 展 ,实现 了 计算 机 之 间 的 互联 ,现代 意义 上 的 计 
算 机 网 络 诞 生 了 。 计 算 机 网 络 的 出 现 , 使 计算 机 之 间 的 通信 ,数据 和 资源 共享 成 为 可 能 , 形 
成 了 一 种 新 的 计算 模式 ,这 就 是 客户 /服务 器 计算 模式 (Client/Server,C/S)。 在 C/S 模式 

一 个 计算 机 应 用 被 一 分 为 二 ,分 为 客户 机 和 服务 器 两 部 分 。 

一 所谓 客 户 机 ， 就 是 用 户 使 用 的 计算 机 ,通常 是 微型 计算 机 ,安装 用 户 使 用 的 应 用 软件 。 
系统 的 应 用 逮 辑 都 在 客户 端 表 达 和 实现 ,完成 与 用 户 的 交互 任务 。 所 谓 服务 器 ,可 以 使 用 各 
种 类 型 的 主机 ,服务 器 负责 数据 管理 ,提供 整个 网 络 中 数据 的 统一 管理 ,通常 运行 数据 库 服 
务 器 系统 ,为 客户 端 提供 数据 的 查询 和 管理 工作 。 在 早期 的 C/S 结构 中 ,服务 器 通常 有 
文件 服务 器 、 数 据 库 服 务 器 ,也 有 各 种 各 样 的 应 用 服务 器 。 所 谓 应 用 服务 器 ,就 是 安装 那 
些 对 计算 机 硬件 要 求 较 高 的 软件 系统 ,供用 户 通过 网 络 使 用 ,而 不 是 安装 到 用 户 的 计算 
机 上 。 

和 集中 式 计算 相 比 ,C/S 计算 模式 有 独特 的 优点 。 首 先 ,因为 C/S 模式 基于 计算 机 网 
络 , 可 实现 各 计算 机 应 用 之 间 的 数据 一 致 性 和 共享 ; 其 次 ,由 于 客户 端 是 一 台独 立 的 计算 
机 ,可 以 将 应 用 更 好 地 分 布 在 整个 网 络 中 ,从 而 更 好 地 平衡 服务 器 的 负载 。 

在 互联 网 出 现 以 前 ,企业 应 用 主要 采用 C/S 结构 。 在 使 用 过 程 中 ,也 暴露 出 了 该 结构 
的 不 足 , 主 要 是 系统 的 管理 ,维护 和 升级 困难 。 在 一 个 企业 中 ,根据 用 户 工作 岗位 不 同 ,需要 
在 客户 端 安装 各 种 不 同 的 应 用 软件 ,例如 ,人 事 部 门 安装 人 事 管理 软件 ,财务 部 门 安装 财务 
软件 等 。 由 于 软件 种 类 不 同 , 功 能 、 风 格 各 异 ,使 得 整个 系统 管理 维护 和 升级 困难 。 

3. 浏览 器 /服务 器 (B/S) 计 算 模式 

20 世纪 90 年 代 , 随 着 Web 的 出 现 ,由 于 客户 /服务 器 计算 模式 的 不 足 ,特别 是 它 的 胖 
客户 机 和 对 局 域 网 的 依赖 ,已 经 不 能 适应 Web 的 发 展 。 人 们 需要 利用 互联 网 ,将 应 用 分 布 
到 整个 Web 中 ,而 不 是 局 限于 企业 局 域 网 内 部 ,一 种 更 加 灵活 的 多 级 分 布 式 计算 模式 , 即 浏 
览 器 /服务 器 模式 (Browser/Server,B/S) 由 此 产生 和 发 展 。 

浏览 器 /服务 器 计算 模式 是 一 种 基于 Web 的 协同 计算 ,是 一 种 三 层 架 构 的 瘦 客 户 机 / 服 
务 器 计算 模式 ,概念 模型 如 图 1-5 所 示 。 


HTTP 请 求 ”cn HTTP 请 求 一 
Web & Dm Web | 数据 库 
i Intemet » 
攻 服务 器 [0 
[| HTML 或 所 人 ”HTML 或 
XML 文档 XML 文档 
图 1-5 B/S 三 层 架 构 计 算 模 式 概念 图 
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在 B/S 三 层 架 构 中 ,第 一 层 为 客户 端 表示 层 ,客户 层 只 保留 一 个 Web 浏览 器 工具 软 
件 , 不 存放 任何 与 业务 相关 的 应 用 程序 。 第 二 层 是 应 用 服务 器 层 , 由 一 台 或 多 台 Web 服务 
器 组 成 ,所 有 的 业务 逻辑 都 在 应 用 层 实 现 , 对 于 不 同人 员 的 功能 和 权限 分 配 , 可 以 通过 用 户 
角色 和 权限 分 配 来 管理 。 第 三 层 是 数据 中 心 层 ,安装 数据 库 服务 器 ,负责 整个 应 用 中 的 数据 
管理 。 

和 C/S 模式 相 比 ,B/S 计算 模式 有 以 下 几 个 显著 优点 : 第 一 ,“ 瘦 "客户 结构 使 客户 端 只 
需要 安装 Web 浏览 器 ,无 须 安 装 不 同 的 应 用 软件 ,系统 维护 简单 ; 第 二 ,应 用 人 逻辑 集中 在 
Web 服务 器 ,具有 集中 管理 的 优势 ,同时 Web 程序 具有 更 好 的 开放 性 ; 第 三 ,运行 在 互联 网 
上 ,用 户 可 以 在 任何 地 点 访问 系统 ,突破 了 局 域 网 的 限制 。 

目前 , 绝 大 多 数 的 计算 机 应 用 都 是 部 署 在 Internet 上 ,例如 ,各 种 各 样 的 电子 商务 平台 、 
企业 和 政府 部 门 的 业务 系统 等 ,大 都 是 采用 了 B/S 结构 。 从 应 用 的 角度 讲 , 用 户 使 用 系统 ， 
就 是 通过 Web 浏览 器 访问 Web 应 用 系统 (网 站 ) 的 过 程 ,访问 的 基本 流程 如 下 。 

(1) 在 用 户 端 ,运行 Web 浏览 器 程序 ,在 浏览 器 地 址 栏 中 ,输入 要 访问 的 网 址 URL, 按 
回 车 键 确认 。 

(2) Web 服务 器 收 到 用 户 的 HTTP 请 求 ,根据 URL 中 指定 的 路 径 和 网 页 文件 , 调 出 相 
应 的 网 页 文件 。 如 果 用 户 要 浏览 的 页 面 是 静态 页 面 (HTML 文件 ), Web 服务 器 将 把 该 页 
面 直接 发 送 给 用 户 ; 如 果 是 服务 器 页 (如 JSP、ASP 等 ), Web 服务 器 将 把 该 页 面 交 给 应 用 服 
务 器 (如 Tomecat) ,由 应 用 服务 器 执行 页 面 中 的 服务 器 脚本 程序 ,执行 完 后 ,将 页 面 返 给 
Web 服务 器 , Web 服务 器 再 将 页 面 发 送 到 用 户 端 浏览 器 。 

(3) 在 用 户 端 , Web 浏览 器 接收 Web 服务 器 返回 的 网 页 文件 ,并 在 浏览 器 窗口 中 打开 
该 文件 。 然 后 从 上 到 下 , 按 标记 对 网 页 内 容 进行 显示 ,如 果 遇 到 客户 端 脚本 程序 , 则 执行 脚 
本 程序 ,直到 文档 结束 。 


1.5.2 网 云 及 其 应 用 


在 互联 网 中 ,分 布 着 无 以 计数 的 服务 器 。 为 了 更 加 有 效 地 使 用 这 些 计算 资源 ,利用 特定 
的 网 络 技 术 , 对 这 些 服 务 器 进行 功能 性 整合 管理 ,形成 一 个 功能 强大 、 高 效 快 捷 和 安全 可 靠 
的 虚拟 网 络 服务 体系 ,这 就 是 网 络 云 ,简称 网 云 。 网 云 的 建立 通常 遵循 一 定 的 商业 模式 ,为 
网 络 用 户 提 供 特 定 的 云 服 务 ,例如 云 服 务 器 、 云 主机 、 云 网 络 、CDN (Content Delivery 
Network, 内 容 分 发 网 络 )?\ 云 存储 ( 云 盘 ) 、 云 数据 库 、 云 虚拟 主机 、 域 名 服务 、 企 业 邮 箱 等 ， 
用 户 可 以 按 需 购买 。 国 内 常见 的 网 去 有 阿里 云 .腾讯 云 、 百 度 云 等 。 

1. 分 布 式 计算 

传统 的 计算 是 指 计算 任务 是 在 一 台 计 算 机 上 完成 的 ,这 种 方式 的 计算 称 为 集中 式 计算 。 
实际 情况 是 ,有 些 应 用 需要 非常 强大 的 计算 能 力 才能 完成 ,采用 集中 式 计算 模式 ,将 需要 耗 
费 相当 长 的 时 间 来 完成 。 随 着 计算 机 网 络 技术 的 发 展 ,产生 了 分 布 式 计算 (Distributed 


@ ”内容 分 发 网 络 (Content Delivery Network,CDN) ,通过 在 网 络 各 处 放置 节点 服务 器 所 构成 的 .在 现 有 的 互联 网 
基础 之 上 的 一 层 智能 虚拟 网 络 ,其 基本 思路 是 尽 可 能 避 开 互联 网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 瓶颈 和 环节 ,使 
内 容 传输 得 更 快 .更 稳定 。CDN 系统 能 够 实时 地 根据 网 络 流量 和 各 节点 的 连接 负载 状况 以 及 到 用 户 的 距离 和 响应 时 间 
等 综合 信息 ,将 用 户 的 请 求 重新 导向 离 用 户 最 近 的 服务 节点 上 ,其 目的 是 使 用 户 可 就 近 取 得 所 需 内 容 , 解 决 互联 网 拥挤 
的 状况 ,以 提高 用 户 访问 网 站 的 响应 速度 。 


Computation) 的 概念 。 分 布 式 计算 就 是 将 一 个 应 用 分 解 成 许多 小 的 部 分 ,分 配给 多 台 计 算 
机 进行 共同 处 理 , 最 后 把 这 些 计 算 结 果 综 合 起 来 得 到 最 终结 果 。 

随 着 互联 网 技术 的 发 展 , 在 分 布 式 计算 基础 上 ,人 们 构建 了 各 种 各 样 的 新 的 计算 模式 ， 
包括 网 格 计算 、 云 计算 等 。 利 用 互联 网 中 的 巨 量 空闲 计算 资源 ,通过 分 布 式 计算 模式 ,人 们 
可 以 解决 那些 需要 惊人 计算 资源 的 计算 问题 ,例如 : 分 析 来 自 外 太空 的 电信 号 ,寻找 隐蔽 的 
黑洞 ,探索 可 能 存在 的 外 星 智 慧生 命 , 寻 找 对 抗 艾滋 病 病毒 的 更 为 有 效 的 药物 等 。 

2. 计算 机 集群 

计算 机 集群 简称 集群 (Cluster) ,是 一 种 计算 机 系统 , 它 通 过 一 组 松散 集成 的 计算 机 软 
件 或 硬件 连接 成 一 个 统一 的 整体 ,从 而 高 度 紧 密 地 协作 完成 计算 工作 。 在 某 种 意义 上 ,它们 
可 以 被 看 作 是 一 台 计 算 机 。 集 群 系统 中 的 单个 计算 机 通常 称 为 节点 ,通常 通过 局 域 网 连接 ， 
但 也 有 其 他 的 可 能 连接 方式 。 集 群 计算 机 通常 用 来 改进 单个 计算 机 的 计算 速度 和 /或 可 靠 
性 。 一 般 情况 下 集群 计算 机 比 单个 计算 机 比如 工作 站 或 超级 计算 机 性 能 价格 比 要 高 得 多 。 

根据 组 成 集群 系统 的 计算 机 之 间 的 体系 结构 是 否 相 同 .集群 分 为 同 构 与 异 构 两 种 。 集 
群 计算 机 按 功能 和 结构 可 以 分 成 以 下 几 类 : 中 高 可 用 性 集群 (High-Availability Clusters)， 
当 集 群 中 有 某 个 节点 失效 的 情况 下 ,其 上 的 任务 会 自动 转移 到 其 他 正常 的 节点 上 。 四 负载 
均衡 集群 (Load Balancing Clusters) ,通过 一 个 或 者 多 个 前 端 负载 均衡 器 将 工作 负载 分 发 到 
后 端的 一 组 服务 器 上 ,从 而 达到 整个 系统 的 高 性 能 和 高 可 用 性 。@ 高 性 能 计算 集群 (High- 
Performance Clusters) ,将 计算 任务 分 配 到 集群 的 不 同 计算 节点 上 以 提高 计算 能 力 ,主要 应 
用 在 科学 计算 领域 。 

此 外 ,集群 的 思想 还 用 于 网 格 计算 (Grid Computing) ,所 谓 网 格 计算 或 网 格 集群 是 一 种 
与 集群 计算 非常 相关 的 技术 。 网 格 与 传统 集群 的 主要 差别 是 网 格 是 连接 一 组 相关 并 不 信任 
的 计算 机 , 它 的 运作 更 像 一 个 计算 公共 设施 而 不 是 一 个 独立 的 计算 机 。 同 时 ,网 格 通常 比 集 
群 支持 更 多 不 同类 型 的 计算 机 集合 。 

3. 负载 均衡 

随 着 互联 网 的 发 展 ,高 并 发 .大 数据 量 的 网 站 要 求 越 来 越 高 。 所 谓 负载 均衡 (Load 
Balance) 就 是 将 一 个 任务 分 挫 到 多 个 操作 单元 上 进行 执行 ,例如 Web 服务 器 、 流 媒体 服务 
器 、 企 业 关 键 应 用 服务 器 和 其 他 关键 任务 服务 器 等 ,从 而 共同 完成 工作 任务 ,以 提高 服务 的 
响应 时 间 ,提高 系统 服务 的 整体 性 能 。 

在 互联 网 中 ,DNS 服务 器 、Web 服务 器 . 流 媒体 服务 器 等 访问 量 大 的 网 络 服务 通常 需要 
应 用 负载 均衡 技术 。 常 用 的 负载 均衡 技术 有 Linux 虚拟 服务 器 (Linux Virtual Server， 
LVS) 负 载 均衡 .Nginx(Engine x, Web 服务 器 / 反 向 代理 服务 器 及 IMAP/POP3 电子 邮件 
代理 服务 器 ) .共享 存储 ,海量 数据 .队列 缓存 等 。 

4. 虚拟 化 技术 

在 各 种 各 样 的 信息 化 过 程 中 ,不 断 增长 的 业务 需要 总 是 要 求 IT 基础 设施 不 断 扩 展 。 
由 于 不 同 的 IT 应 用 有 不 同 的 运行 环境 ,这 通常 需要 不 断 地 增加 服务 器 。 单 纯 地 增加 服务 
器 的 数量 导致 了 许多 服务 器 的 利用 率 很 低 , 从 而 导致 网 络 管理 成 本 增加 ,灵活 性 和 可 靠 性 
降低 。 

一 种 新 的 发 展 趋势 是 虚拟 化 ,就 是 在 一 台 物 理 的 计算 机 上 ,利用 特定 的 虚拟 化 软件 , 创 
建 几 个 逻辑 上 独立 的 虚拟 计算 机 (Virtual Machine) ,每 个 逻辑 上 的 计算 机 分 配 一 定 大 小 的 
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内 存 、 硬 盘 和 CPU ,分 别 安装 各 自 的 操作 系统 ,从 而 构建 一 个 独立 的 运行 环境 。 虚 拟 化 可 以 
减少 服务 器 数量 的 增加 ,简化 服务 器 管理 ,同时 明显 提高 服务 器 利用 率 、 网 络 灵 活性 和 可 靠 
性 。 通 过 将 多 种 应 用 整合 到 少量 企业 级 服务 器 上 从 而 满足 不 断 增 长 的 业务 需求 。 

在 互联 网 中 ,虚拟 化 也 可 以 将 多 台独 立 的 服务 器 ,利用 网 络 技术 ,集成 为 一 个 虚拟 的 统 
一 计算 资源 (网 云 ) ,然后 为 网 络 用 户 提供 特定 的 虚拟 服务 器 .虚拟 主机 服务 。 或 者 将 一 个 复 
杂 的 大 的 计算 任务 ,分布 到 网 云 ,以 进行 分 布 式 计算 和 管理 。 

5. 云 计 算 平 台 

所 谓 网 云 ,首先 需要 将 那些 独立 的 计算 机 通过 网 络 连 接 在 一 起 ,形成 一 个 统一 的 可 以 协 
调 工作 的 计算 资源 ,然后 再 虚拟 出 各 种 性 能 的 虚拟 计算 机 或 计算 资源 ,为 用 户 提供 按 需 服 
务 。 不 难 理解 ,只 有 上 述 的 网 络 连 接 是 不 够 的 ,还 需要 有 一 个 超级 操作 系统 对 整个 云 资源 进 
行 管理 和 调度 。 与 传统 的 计算 机 操作 系统 相 比 ,这 个 超级 操作 系统 可 以 看 作 是 若干 操作 系 
统 之 上 的 操作 系统 , 它 管理 的 范围 更 大 ,管理 的 对 象 是 一 台 台 的 物理 和 虚拟 主机 。 

要 搭建 一 个 云 计算 平台 ,需要 安装 具有 上 述 功能 的 云 操作 系统 ,常用 的 软件 系统 有 
VMware 云 操作 系统 , 它 可 以 把 包括 处 理 器 、 存 储 和 网 络 在 内 的 大 量 虚拟 化 基础 架构 组 件 作 
为 无 缝 、 灵 活 和 动态 的 操作 环境 进行 管理 。 此 外 ,由 Rackspace 发 起 、 全 球 开发 者 共同 参与 
的 开源 项 目 OpenStack 也 是 一 个 用 于 构建 数据 中 心 的 云 操作 系统 。 


1.5.3 语义 Web 


万 维 网 已 经 成 为 人 类 最 大 的 信息 仓库 ,而 且 各 种 语言 .各 个 知识 领域 的 内 容 还 在 源源 不 
断 地 快速 增长 。 这 些 海量 的 信息 在 给 我 们 提供 便利 的 同时 ,也 让 我 们 的 信息 查询 变 得 极为 
困难 。 大 多 数 的 搜索 引擎 是 基于 关键 词 的 搜索 ,搜索 是 基于 页 面 内 容 的 ,而 不 是 基于 页 面 内 
容 或 页 面 信息 的 语义 , 查 准 率 较 低 。 人 们 需要 让 页 面 内 容 有 意义 ,从 而 提供 各 种 依靠 语义 的 
自动 化 服务 ,这 就 是 语义 Web 的 研究 动机 。 

1. 语义 Web 的 概念 

在 WWW 出现 不 入, 人们 就 已 经 意识 到 语义 对 于 Web 的 重要 性 。HTML 只 是 规范 了 
内 容 的 显示 , 却 无 法 表达 内 容 的 含义 。 没 有 形式 化 的 网 页 内 容 , 机 器 将 无 法 实现 信息 处 理 的 
自动 化 。 只 有 将 网 页 内 容 表述 成 机 器 可 以 理解 的 格式 , Web 才 可 能 成 为 一 个 巨大 的 知识 
库 ,充分 实现 信息 的 查找 .共享 和 重用 。 为 此 ,1998 年 ,万 维 网 的 发 明 者 Tim Berners-Lee 首 
次 提出 了 语义 Web(Semantic Web) 的 概念 。 

对 于 语义 Web 的 概念 ,一 般 表述 是 : 语义 Web 是 当前 Web 的 一 个 扩展 ,其 中 信息 具有 
形式 化 定义 的 语义 ,更 有 助 于 计算 机 之 间 以 及 计算 机 与 人 之 间 的 协同 工作 。 其 思想 是 使 
Web 上 的 数据 以 这 样 一 种 方式 来 定义 与 链接 ,使 其 能 够 在 各 种 不 同 的 应 用 场景 中 有 效 地 实 
现 数据 的 发 现 .自动 化 处 理 、 集 成 与 复 用 。 当 且 仅 当 Web 不 仅 成 为 人 所 共享 加 工 的 场所 ,也 
成 为 自动 化 工具 所 共享 加 工 的 场所 时 ,语义 Web 方 能 实现 其 全 部 潜力 。 

语义 Web 有 很 多 突出 的 优点 ,包括 数据 集成 更 简单 搜索 更 精确 .知识 管理 更 方便 等 
等 ,结果 语义 Web 这 个 词 的 含义 越 来 越 丰富 。 

2. 语义 Web 体系 架构 

要 实现 语义 Web ,依赖 于 三 大 关键 技术 : XML、RDF 和 Ontology。 语 义 Web 分 层 体系 
架构 如 图 1-6 所 示 。 











图 1-6 语义 Web 体系 架构 


(1) Unicode 和 URI 层 。Web 内 容 采 用 Unicode 字符 集 ,负责 资源 的 编码 ,统一 资源 标 
识 符 URICUniform Resource Identifier) 用 于 资源 标识 ,唯一 标识 网 络 上 的 一 个 概念 或 资 
源 。 在 语义 Web 体系 结构 中 ,该 层 是 整个 语义 Web 的 基础 。 

(2) XML 二 NS 二 XML Schema 层 。 该 层 可 以 称 为 XML 层 , 用 于 表示 数据 的 内 容 和 结 
构 。XML 实现 文档 的 结构 化 定义 , 即 进行 文档 形式 化 。 命 名 空间 NSCName Space) ,由 
URI 索引 确定 ,目的 是 保证 元 素 重 命名 而 引起 的 歧义 。XML Schema 提供 更 多 的 数据 类 
型 ,为 XML 文档 提供 数据 校 验 机 制 。 该 层 负责 从 语法 上 表示 数据 的 内 容 和 结构 ,实现 Web 
内 容 和 表现 形式 的 分 离 。 

(3) RDF 十 RDF Schema 层 。 又 可 以 分 为 RDF 层 和 RDF Schema 层 ,其 中 RDF 用 于 描 
述 资源 及 其 相互 关系 ,RDF Schema 层 为 RDF 提供 类 型 定义 机 制 ,确定 RDF 描述 的 资源 所 
使 用 的 领域 词汇 。 因 为 XML 不 具备 语义 描述 能 力 , W3C 推荐 以 RDF (Resource 
Description Framework) 标 准 来 解决 XML 的 语义 局 限 。 

RDF 解决 的 是 如 何 采用 XML 标准 语法 无 二 义 性 地 描述 资源 对 象 的 问题 ,使 得 所 描述 
的 资源 的 元 数据 信息 成 为 机 器 可 理解 的 信息 。RDF Schema 使 用 一 种 机 器 可 以 理解 的 体系 
来 定义 描述 资源 的 词汇 ,其 目的 是 提供 词汇 内 入 的 机 制 或 框架 ,在 该 框架 下 多 种 词汇 可 以 集 
成 在 一 起 实现 对 Web 资源 的 描述 。 

(4) Ontology 十 Rules 层 。 本 体 (Ontology) 负责 在 RDF(S) 基 础 上 定义 的 概念 及 其 关 
系 的 抽象 描述 ,用 于 描述 应 用 领域 的 知识 ,描述 各 类 资源 及 资源 之 间 的 关系 ,实现 对 词汇 表 
的 扩展 。 在 这 一 层 , 用 户 不 仅 可 以 定义 概念 而 且 可 以 定义 概念 之 间 的 复杂 关系 。 规 则 用 于 
描述 领域 知识 中 的 前 提 和 结论 。 本 体 和 规则 共同 构成 领域 知识 层 。 

W3C 推荐 使 用 OWL(Web Ontology Language) 作 为 Web 本 体 描 述 语言 ,OWL 既 提 供 
了 正式 的 语义 ,又 提供 了 附加 的 词汇 : 比 起 XML 、RDF 和 RDF Schema, 对 Web 内 容 实 现 了 
更 好 的 机 器 互 操作 性 。 

(5) Unify Logic 层 。 在 下 面 各 层 基 础 上 ,提供 公理 和 推理 规则 ,Logic 一 旦 建立 , 便 可 
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通过 逻辑 推理 对 资源 .资源 之 间 的 关系 以 及 推理 结果 进行 验证 ,证 明 其 有 效 性 。 

(6) Proof 层 。 通 过 Proof 交换 以 及 数字 签名 ,建立 一 定 的 信任 关系 ,从 而 证 明 语 义 
Web 输出 的 可 靠 性 以 及 其 是 否 符合 用 户 的 要 求 。 

(7) Trust 层 。 支 持 代理 间 通 信 的 证 据 交换 ,在 用 户 间 建立 信任 关系 。 

(8) User Interface 十 Applications 层 。 应 用 层 是 构建 在 语义 Web 之 上 的 各 种 应 用 。 

总 之 ,在 语义 Web 体系 架构 中 ,下 面 两 层 是 语义 Web 的 基础 设施 ,中 间 从 元 数据 发 展 
到 本 体 描述 语言 及 其 统一 的 逻辑 是 语义 Web 的 关键 ,证 明和 信任 及 各 层次 贯穿 的 数字 签名 
技术 是 扩充 ,是 对 语义 Web 成 功 应 用 的 要 求 与 展望 。 

3. 语义 Web 的 应 用 

在 语义 Web 中 ,可 以 提供 各 种 依靠 语义 的 自动 化 服务 ,包括 : 互联 网 信息 发 布 与 搜 
索 , 通 过 对 内 容 的 标注 与 分 析 从 而 克服 关键 词 查询 的 歧义 性 ,可 以 大 大 提高 查询 精度 。 此 
外 ,基于 语义 Web 的 文档 检索 与 知识 管理 也 是 当前 研究 的 一 个 热点 。 例 如 ,英语 的 
WordNet 和 中 文 的 知 网 (HowNet) 0 都 是 建立 在 概念 语义 之 上 的 知识 网 。@Web 问题 解 
答 ,在 用 Ontology 对 信息 源 进行 标注 的 基础 上 ,进一步 运用 知识 库 来 解答 用 户 提 问 。 例 如 ， 
Stanford 大 学 研制 的 Triple 系统 是 一 个 基于 逻辑 程序 设计 的 RDF 查询 系统 ; 德国 
Karlsruhe 大 学 等 单位 研制 的 SEAL 是 一 个 语义 Web 门户 网 站 , 它 具 有 回答 用 F- 逮 辑 表 示 
的 查询 的 能 力 ,F- 逻 辑 使 得 Ontology 中 的 概念 与 问题 求解 规则 融 于 一 体 。 

语义 Web 的 目标 是 改善 当今 的 Web, 它 的 主要 思想 是 使 语义 信息 成 为 计算 机 可 处 理 
的 对 象 。 要 将 Web 语义 化 是 非常 困难 的 ,语义 Web 很 难 一 下 子 获得 巨大 成 功 ,但 是 , 它 会 
一 点 点 地 渗透 到 现 有 的 Web 中 ,在 人 们 的 不 知 不 觉 中 ,使 互联 网 进入 语义 Web 时 代 。 


本 章 小 结 


本 章 首 先 介绍 了 Internet 的 产生 和 发 展 ,然后 介绍 了 万 维 网 的 概念 ,以 及 万 维 网 和 互联 
网 的 关系 。 讲解 了 Web 服务 器 、Web 浏览 器 的 概念 和 功能 ,详细 讲解 了 HTTP 协议 的 原 
理 。 在 此 基础 上 ,介绍 了 WWW 中 的 常见 概念 , 较 详细 地 介绍 了 Web 相关 技术 ,包括 标记 
语言 Java 技术 和 Web 服务 。 接 下 来 从 应 用 的 角度 出 发 ,介绍 了 计算 机 应 用 模式 的 变迁 ,分 
别 对 集中 式 计算 .C/S 计算 模式 和 基于 Web 的 B/S 三 层 体 系 结构 进行 了 介绍 ,并 分 析 了 B/ 
S 架构 的 Web 应 用 的 基本 工作 过 程 ,并 对 网 云云 服务 及 相关 技术 进行 了 介绍 。 


习 题 


1. 上 网 查询 以 下 HTTP 头 域 的 含义 及 取 值 。 
Host, User-Agent, Accept, Accept-Charset, Keep-Alive, Connection, Date, 下 xpired 
Referer, Server, Last-Modified, ETag, Via. 


Q@ 知 网 (HowNet) 是 一 个 以 汉语 和 英语 的 词语 所 代表 的 概念 为 描述 对 象 , 以 揭示 概念 与 概念 之 间 以 及 概念 所 具有 
的 属性 之 间 的 关系 为 基本 内 容 的 常识 知识 库 , 网 址 为 http://www. keenage. com/ 。 该 知识 库 通过 概念 及 概念 属性 之 间 
的 语义 关系 建立 一 个 语义 网 结构 ,常用 于 自然 语言 处 理 、 文 本 分 析 等 研究 应 用 领域 


. 什么 是 Web 服务 器 和 Web 浏览 器 ? 简 述 它们 的 基本 功能 。 
. 什么 是 B/S 结构? 和 C/S 结构 相 比 有 什么 优点 ? 
. 画 出 B/S 三 层 架 构 概 念 图 , 简 述 其 基本 工作 机 理 。 
. 什么 是 Web 应 用 ? Web 应 用 和 传统 的 exe 程序 有 何不 同 ? 
. Java 技术 包括 哪些 方面 的 内 容 ? 
什么 是 Web 服务 ? 举例 说 明 。 
. 在 互联 网 中 , 知 网 (HowNet) 和 中 国 知 网 (CNKD) 都 是 很 有 影响 的 知识 库 系 统 , 上 网 
搜索 ,说 明 两 者 有 何不 同 ,各 有 什么 用 途 。 
9. 上 网 搜索 ,说 明 什么 是 云 服务 ,目前 我 国有 哪些 主要 的 网 云 及 云 服务 。 
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【本 章 导 读 】 

在 互联 网 中 ,Web 服务 是 最 主要 的 网 络 服务 之 一 ,一 提 到 Internet ,就 会 想到 WWW， 
WWW 几乎 成 为 互联 网 的 代名词 。 实 际 上 ,WWW 只 是 Internet 的 一 个 子 集 , 它 是 由 
Internet 中 的 Web 服务 器 和 Web 客户 机 构成 的 。Web 服务 器 就 是 那些 安装 了 Web 服务 
器 软件 的 计算 机 ,而 安装 了 Web 浏览 器 的 计算 机 则 是 Web 客户 机 。Web 之 于 Internet, 简 
单 地 讲 ,WWW 更 像 是 Internet 的 一 个 易 操作 的 用 户 界面 。 从 技术 上 讲 , 基 于 Web 的 B/S 
三 层 结构 的 产生 和 发 展 改变 了 传统 的 计算 机 应 用 模式 ,今天 ,Web 应 用 已 经 成 为 计算 机 应 
用 的 主要 模式 。 

本 章 首先 介绍 网 络 服务 器 `Web 服务 器 等 概念 ,介绍 主要 的 Web 服务 器 产品 。 然 后 以 
Windows 服务 器 中 的 IIS 为 例 , 介 绍 Web 服务 器 的 安装 .配置 和 管理 ,讲解 Web 站 点 涉及 
的 主要 概念 ,包括 : 端口 主 目录 、 默 认 文档 目录 安全 性 等 。 在 学 习 了 Web 站 点 的 基本 概 
念 后 ,讲解 目前 使 用 最 多 的 Apache 和 Tomcat 服务 器 的 功能 和 两 者 的 关系 ,介绍 Java 运行 
环境 、JDK、JVM 的 概念 ,以 及 它们 的 安装 和 配置 ,讲解 虚拟 主机 、 虚 拟 目录 等 概念 。 最 后 ， 
对 Web 服务 器 的 远程 管理 与 内 容 维护 进行 介绍 。 

【知识 要 点 】 

2. 1 节 : Web 服务 器 的 概念 ,Internet Information Server(IIS) ,Apache HTTP Server。 

2. 2 节 : Internet 信息 服务 (JIIS) ,IIS 组 件 的 安装 ,Internet 服务 管理 器 。 

2.3 节 :新建 Web 站 点 ,主机 头 , 主 目录 ,站 点 的 启动 ,站 点 的 停止 ,Web 应 用 目录 结构 
的 规划 ,文件 命名 , URL。 

2.4 节 : Web 站 点 属性 ,站 点 的 配置 ,IP 地 址 及 域名 限制 ,匿名 访问 和 验证 控制 ,默认 文 
档 ,HTTP 头 。 

2.5 节 : Apache 服务 器 ,Tomcat 应 用 服务 器 .Apache 服务 器 的 安装 ,Apache 服务 器 的 
基本 配置 ,Java 运行 环境 Tomcat 的 安装 和 配置 Apache 和 Tomcat 的 整合 。 

2.6 节 : 虚拟 主机 的 概念 ,基于 IP 地 址 的 虚拟 主机 ,基于 域名 的 虚拟 主机 ,Apache 中 虚 
拟 主 机 的 配置 ,虚拟 目录 的 概念 ,Apache 中 虚拟 目录 的 配置 ,Tomcat 中 虚拟 目录 的 配置 。 

2.7 节 : 远程 管理 ,终端 服务 ,远程 桌面 ,FTP 服务 。 


2.1 Web 服务 器 概述 


在 全 球 亿 万 个 网 站 或 Web 应 用 系统 的 背后 ,都 运行 着 一 台 或 多 台 Web 服务 器 。 就 是 
这 些 Web 服务 器 ,为 用 户 提供 了 万 维 网 的 页 面 浏览 服务 。 要 使 一 台 计 算 机 成 为 Web 服务 


器 ,需要 安装 网 络 操作 系统 和 相应 的 Web 服务 程序 。 不 同 的 计算 机 操作 系统 平台 ,安装 的 
Web 服务 程序 也 不 一 样 。 目 前 , 主流 的 Web 服务 器 软件 主要 有 微软 Windows 服务 器 操作 
系统 中 内 置 的 IIS 和 路 平台 的 Web 服务 器 开源 软件 Apache HTTP Server。 


2.1.1 Web 服务 器 的 概念 


在 互联 网 中 ,Web 服务 器 有 两 个 层面 的 含义 : 第 一 层 意 思 是 指 安装 了 Web 服务 器 的 计 
算 机 ,该 计算 机 通常 是 服务 器 计算 机 ,安装 服务 器 操作 系统 ,例如 UNIX,Linux, Windows 
Server 等 ; 第 二 层 含义 是 指 Web 服务 器 程序 。 服 务 程序 和 客户 程序 总 是 成 对 出 现 的 ,没有 
客户 也 就 谈 不 上 服务 。 所 谓 服务 程序 ,就 是 一 种 监听 程序 ,通过 监听 特定 的 通信 端口 ,与 客 
户 建立 连接 ,通过 特定 的 应 用 层 协议 ,和 客户 程序 之 问 实 现 数据 通信 。 

在 20 世纪 90 年 代 , 出 现 了 HTML、Web 服务 器 、Web 浏览 器 和 HTTP 协议 的 概念 ， 
Web 服务 器 和 Web 浏览 器 之 间 通 过 HTTP 协议 传输 HTML 文件 ,因此 Web 服务 器 又 称 
为 HTTP Server,Web 浏览 器 就 是 HTTP 客户 。 互 联网 中 无 以 计数 的 Web 服务 器 和 Web 
浏览 器 共同 构成 了 万 维 网 (WWW)。 


2.1.2 Web 服务 器 程序 


1993 年 1 月 ,美国 国家 超级 计算 应 用 中 心 CNational Center for Supercomputer 
Applications,NCSA) 开 发 了 httpd 代码 ,实现 了 Web 服务 器 的 功能 。 简 单 地 讲 , Web 服务 
器 就 是 一 个 HTTP 服务 器 程序 ,其 基本 功能 就 是 将 用 户 要 浏览 的 网 页 发 送 给 用 户 的 浏览 
器 。 从 概念 上 讲 , Web 服务 器 程序 的 功能 单一 且 明 确 , 它 要 比 普通 的 应 用 软件 (如 字 处 理 
器 图形 图 像 处 理 软件 等 ) 简 单 得 多 。 但 是 ,在 具体 实现 时 ,不 同 的 Web 服务 器 程序 的 功能 、 
性 能 以 及 对 于 网 页 中 客户 端 和 服务 端 脚本 程序 的 处 理 方 式 有 较 大 不 同 。 

目前 ,常见 的 Web 服务 器 并 不 多 ,主要 有 以 下 两 大 类 ; 

1. Internet Information Server(IIS) 

1995 年 , 微软 推出 了 Windows 系列 操作 系统 中 具有 深远 影响 的 桌面 操作 系统 
Windows 95 和 服务 器 操作 系统 Windows NT 3. 51 ,在 WindowsNT 3. 51 中 首次 包含 了 一 
个 服务 包 Internet Information Server, 即 IIS 1. 0. 开 始 提供 构建 互联 网 服务 器 支持 。 从 此 
IIS 作为 Windows 服务 器 操作 系统 的 一 个 内 置 组 件 , 随 着 Windows 版 本 的 不 断 升 级 而 
发 展 。 

1996 年 7 月 29 日 , 随 着 Windows NT 4.0 服务 器 的 发 布 ,IIS 服务 组 件 升级 为 IIS 3.0， 
开始 支持 ASP 运行 环境 , 即 支 持 网 站 ASP 编程 ,具备 了 一 个 完整 意义 上 的 开发 和 运行 Web 
站 点 的 功能 。2000 年 ,微软 推出 Windows 2000 Server, 内 置 IIS 5.0, 在 安装 相关 版 本 的 
NetFrameWork 的 RunTime 之 后 ,可 支持 ASP. NET 1. 0/1. 1/2.0 运行 环境 。 在 随后 的 
Windows Server 2003 中 内 置 了 IIS 6.0 ,在 Windows Server 2008 和 Windows 7 中 ,IIS 升 
级 为 IIS 7.0, 集 成 了 . NET 3.5, 可 支持 . NET 3.5 及 以 下 版 本 。 

微软 的 IIS, 不 仅仅 是 一 个 HTTP 服务 器 , 它 还 包含 了 多 种 服务 程序 ,以 及 开发 Web 站 
点 所 需要 的 ASP 对 象 及 ASP 服务 器 页 面 运行 环境 。 把 这 些 复 杂 的 功能 组 合 在 一 个 统一 的 
IIS 中 固然 可 以 简化 服务 的 安装 和 配置 ,但 对 于 用 户 理解 和 系统 维护 并 不 方便 。 从 上 述 的 
版 本 升级 可 以 看 出 ,安装 不 同 版 本 的 Windows 服务 器 操作 系统 ,其 IIS 并 不 相同 ,支持 的 网 
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站 开发 环境 也 不 相同 。 用 户 应 根据 Web 系统 开发 和 运行 的 需要 ,选择 一 种 相对 较 新 的 
Windows 服务 器 操作 系统 版 本 ,以 及 IIS 所 支持 的 功能 进行 网 站 系统 开发 。 

对 于 IIS ,作为 Windows 服务 器 操作 系统 的 内 置 服务 组 件 , 其 优点 是 容易 安装 和 管理 ， 
但 是 最 大 的 缺点 是 它 只 能 安装 在 Windows 平台 中 ,不 能 在 其 他 操作 系统 平台 上 安装 。 此 
外 ,选择 了 IIS 创建 网 站 ,也 就 等 于 选择 了 网 站 开发 工具 只 能 是 ASP 开发 。 如 果 用 户 的 服 
务 器 不 是 Windows 系统 ,或 者 不 想 使 用 ASP 编程, 则 需要 选择 其 他 的 Web 服务 器 。 

2. Apache 

Apache 服务 器 是 一 种 Web 服务 器 ,全称 为 Apache HTTP Server ,简称 Apache。 它 是 
在 美国 伊利 诺 伊 大 学 国家 超级 计算 应 用 中 心 (National Center for Supercomputing 
Applications,NCSA) 开 发 的 NCSA httpdl. 3 基础 上 修改 而 成 的 ,1995 年 4 月 , Apache 
0. 6.2 公布 ,随后 开发 人 员 再 接 再 厉 ,在 一 年 之 内 ,Apache 服务 器 超过 了 NCSA 的 httpd 成 
为 Internet 上 排名 第 一 的 Web 服务 器 。2004 年 ,Apache 2. 0 发 布 , 新 的 版 本 不 再 包含 
NCSA 代码 ,2012 年 发 布 Apache 2. 4。 

在 发 展 初期 ,Apache 主要 是 一 个 基于 UNIX 系统 的 服务 器 , 它 的 宗旨 就 是 建成 一 个 基 
于 UNIX 系统 的 、 功 能 更 强 、 效 率 更 高 并 且 速 度 更 快 的 Web 服务 器 。 目 前 ,Apache HTTP 
Server 是 使 用 最 广 的 Web 服务 器 ,有 多 个 操作 系统 平台 版 本 ,可 以 运行 在 几乎 所 有 的 
UNIX、Linux、Windows 等 主流 服务 器 操作 系统 平台 上 ,并 且 很 多 类 型 的 UNIX 、Linux 操作 
系统 都 集成 了 Apache HTTP Server。 

Apache 服务 器 具有 简单 ,高效 .性 能 稳定 安全、 免费 . 跨 平 台 等 特性 ,已 经 成 为 最 为 广 
泛 的 Web 服务 器 。 许 多 大 型 的 网 站 .例如 Google、Yahoo、 阿 里 巴巴 、sina、 百 度 、 网 易 、 搜 狐 
等 都 采用 Linux 或 FreeBSD 等 操作 系统 平台 ,并 配置 Apache 服务 器 ,构建 自己 的 Web 服 
务 器 系统 。 对 于 Apache HTTP Server, 用 户 可 以 免费 从 Apache 官方 网 站 下 载 不 同 的 操作 
系统 版 本 。 

在 IIS 中 ,集成 了 ASP 和 . NET, 以 支持 运行 网 页 中 的 ASP 程序 。 但 是 ,在 Apache 服 
务 器 中 ,对 于 服务 器 页 面 的 支持 不 是 在 Apache 服务 器 中 实现 的 ,需要 借助 于 相应 的 应 用 服 
务 器 ,例如 : Tomacat 支持 JSP 和 Java Servelet 的 程序 运行 。 当 用 户 浏览 JSP 页 面 时 ， 
Apache HTTP Server 将 把 服务 器 页 面 发 送 给 Tomcat 去 执行 ,然后 Tomcat 将 结果 返回 给 
Apache 服务 器 ,Apache 再 将 页 面 发 送 给 用 户 浏览 器 。 

除了 上 述 两 种 常用 的 Web 服务 器 外 ,还 有 一 些 专用 的 Web 服务 器 ,例如 : Zeus( 宙 斯 ) 
Web 服务 器 ,其 特点 是 可 部 署 在 SMP 服务 器 集群 环境 ,具有 更 高 的 负载 均衡 (Load 
Balance) 能 力 。 随 着 互联 网 的 发 展 , Web 服务 器 也 会 和 Web 浏览 器 一 样 出 现 越 来 越 多 的 产 
品 供用 户 选择 ,其 目标 就 是 保证 更 高 的 服务 质量 和 用 户 体验 。 


2.2 使 用 Internet 信息 服务 


在 Windows 服务 器 操作 系统 中 ,内 置 了 Internet 信息 服务 组 件 (Internet Information 
Server,IIS) ,不 同 的 Windows 服务 器 系统 版 本 ,其 IIS 包含 的 内 容 也 不 一 样 ,但 都 包含 了 
Web 服务 器 组 件 ,用 于 创建 和 运行 Web 站 点 。 本 节 以 JS 7. 0 为 例 , 介 绍 IIS 的 组 成 及 
功能 。 








2.2.1 什么 是 Internet 信息 服务 


Internet 信息 服务 (Internet Information Server,IIS) 是 Windows 服务 器 操作 系统 内 置 
的 服务 组 件 ,最 早出 现在 1995 年 发 布 的 Windows NT 3. 51 中 ,IIS 由 一 系列 子 组 件 构成 。 
随 着 Windows 服务 器 系统 版 本 的 升级 ,IIS 也 不 断 升级 ,其 包含 的 内 容 也 在 变化 。 这 些 变 
化 ,不 仅 是 版 本 的 升级 ,也 与 互联 网 技术 的 发 展 、 微 软 对 自身 产品 的 定位 有 关 。 

在 IIS 的 发 展 过 程 中 ,其 包含 的 子 组 件 主要 包括 以 下 几 种 。 

(1) World Wide Web 服务 。 该 服务 组 件 用 于 创建 Web 服务 器 ,是 IIS 的 主要 组 成 部 
分 。 在 IIS 中 ,与 Web 服务 对 应 还 有 服务 端 脚本 程序 引擎 ,是 ASP 等 服务 器 脚本 规范 与 运 
行 容器 ,负责 ASP 页 面 中 服务 端 脚本 程序 的 解析 工作 。 

(2) SMTP 服务 。 在 IIS 中 ,微软 对 SMTP(Simple Mail Transfer Protocol) 邮 件 服 务 
的 使 用 一 直 是 矛盾 的 ,在 Windows 2000 Server/IIS 5 中 ,IIS 中 包含 了 虚拟 SMTP 服务 器 ， 
可 以 用 于 创建 SMTP 服务 ,实现 邮件 的 外 发 服务 。 在 Windows Server 2003/IIS 6.0 中 , 系 
统 增加 了 POP3 服务 ,提供 了 完整 的 Email 服务 。 进 入 Windows Server 2006/IIS 7.0,POP 
服务 被 取消 ,SMTP 服务 定位 成 一 种 功能 ,这 或 许 与 微软 的 邮箱 系统 下 xchanger Server 商 
业 销 售 有 关 。 

(3) FTP 服务 。 在 IIS 6. 0 及 以 前 的 版 本 中 ,IIS 中 通常 包含 FTP 服务 。FTP 服务 用 
于 建立 FTP 站 点 ,支持 文件 的 上 传 和 下 载 。 随 着 互联 网 中 HTTP 应 用 的 广泛 ,FTP 服务 已 
经 用 得 越 来 越 少 ,在 新 版 的 IIS 中 ,不 再 提供 FTP 角色 。 

(4) NNTP 服务 。 在 互联 网 发 展 的 早期 ,网 络 新 闻 服 务 是 一 种 常用 的 信息 发 布 和 获取 
手段 ,因此 早期 的 IIS 中 内 置 了 NNTP(CNetwork News Transfer Protocol) 服务 组 件 , 用 于 
建立 网 络 新 闻 服 务 器 。 用 户 通过 NNTP 客户 端 ,例如 微软 的 Outlook 创建 新 闻 账 户 ,访问 
NNTP 服务 器 。 现 在 ,NNTP 的 功能 已 经 被 基于 Web 的 站 点 所 取代 , NNTP 的 概念 已 经 
消失 。 

(5) Internet 服务 管理 器 。 用 于 配置 和 管理 IIS 的 管理 工具 ,安装 JS 后 ,在 Windows 
系统 的 “管理 工具 ”文件 夹 生 成 此 工具 。 通 过 该 工具 ,可 以 实现 Web 站 点 的 创建 .配置 和 管 
理 操作 。 也 可 以 在 Windows 系统 的 管理 控制 台 (Microsoft Management Console,MMC ) 中 
进行 定制 ,以 管理 单元 形式 显示 ,将 IIS 的 管理 组 织 到 一 个 统一 的 管理 框架 中 。 

(6) Internet 服务 管理 器 (HTML)。 对 服务 器 的 管理 通常 分 为 两 种 方式 : 一 种 是 在 本 
地 ,利用 相应 的 管理 工具 进行 管理 ; 另 一 种 方式 就 是 远程 管理 。 远 程 管理 可 分 为 C/S 模式 
和 基于 Web 的 模式 ,Internet 服务 管理 器 (HTML) 就 是 一 种 基于 Web 的 IIS 管理 方式 ,其 
本 质 是 在 服务 器 上 建立 一 个 管理 用 的 Web 站 点 ,用 户 通 过 浏览 器 访问 该 管理 站 点 来 实现 对 
Web 服务 器 IIS 的 远程 管理 。 





2.2.2 安装 IIS 


在 现代 计算 机 操作 系统 中 ,除了 与 操作 系统 功能 紧密 相关 的 内 核 功能 外 ,大 部 分 的 可 选 
功能 都 是 以 组 件 的 形式 提供 的 ,它们 虽然 作为 系统 的 一 部 分 ,但 安装 操作 系统 时 可 根据 需要 
选择 安装 ,这 就 大 大 地 提高 了 系统 的 灵活 性 。 
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在 Windows 操作 系统 的 “控制 面板 ”中 ,都 包含 一 个 “添加 /删除 程序 "实用 工具 ,利用 该 
工具 可 以 在 操作 系统 中 添加 新 的 服务 组 件 ,也 可 以 删除 已 经 安装 的 组 件 。TIS 并 不 属于 操 
作 系 统 的 核心 功能 ,例如 : 不 是 每 一 台 计 算 机 都 要 做 Web 服务 器 ,因此 , 它 是 作为 Windows 
服务 器 系统 的 内 置 组 件 提供 的 。 因 此 ,从 本 质 上 讲 , 用 户 可 以 利用 Windows“ 控 制 面板 ”中 
的 “添加 /删除 程序 ”工具 来 完成 IIS 的 安装 。 

不 同 的 Windows 系统 版 本 ,对 IIS 的 安装 也 提供 了 新 的 便捷 方法 ,例如 : 在 Windows 
Server 2003 中 ,JIS 组 件 是 “应 用 服务 器 ”的 一 部 分 ,可 以 利用 管理 工具 中 的 “管理 您 的 服务 
器 ”程序 添加 “应 用 程序 服务 器 ”角色 来 实现 IIS 的 安装 。 在 Windows Server 2008/IIS 7. 0 
中 ,IIS 被 定义 为 Web 服务 器 角色 ,需要 通过 Windows 控制 面板 /管理 工具 文件 夹 中 的 “ 服 
务 器 管理 器 ”程序 完成 安装 。 

下 面 以 Windows Server 2008 为 例 ,介绍 IIS 7.0 的 安装 ,具体 操作 步骤 如 下 : 

(1) 在 控制 面板 /管理 工具 文件 夹 ,双击 “服务 器 管理 器 "程序 图 标 ,运行 服务 器 管理 器 
程序 。 在 “服务 器 管理 器 "控制 台 树 中 , 单 击 * 角 色 ”, 在 窗口 右 侧 ,显示 系统 角色 管理 窗 格 ,如 
图 2-1 所 示 。 


请 半生 和 各 上 角色 的 和 全 扩 ,以 及 汪 加 或 时 负 


“ 角色 摘要 加 角色 摘要 素 助 


3 角色 : 已 安装 0 ( 共 16) 种 添加 角色 
各 删除 角色 





| 上 次 出 新 时 间 : 2016/5/19 9:00:42 配合 出 亲 





图 2-1 Windows Server 2008 服务 器 管理 器 


在 窗口 右 侧 的 角色 摘要 区 域 . 单 击 “ 添 加 角色 ”. 启 动 “添加 角色 向 导 ”, 显 示 服 务 器 角色 
选择 列表 ,如 图 2-2 所 示 。 

在 Windows Server 2008 中 ,定义 了 16 种 服务 器 角色 : 单 击 “Web 服务 器 (IIS)” 列 表 
项 ,然后 , 单 击 * 下 一 步 ? 按 钮 ,开始 安装 Web 服务 器 角色 。 在 显示 IIS 7. 0 介绍 页 面 后 ,显示 
Web 服务 器 可 选 角 色 服 务 列表 ,如 图 2-3 所 示 。 

在 Web 服务 器 角色 服务 列表 中 , 列 出 了 安装 IIS 时 可 选 的 功能 ,除了 HTTP 功能 .应 用 
程序 开发 和 健康 与 诊断 外 ,向 下 拖 动 滚动 条 .还 可 以 看 到 安全 性 (基本 身份 验证 ,URL 授权 、 
IP 和 域 限制 等 ) ,性 能 \ 管 理工 具 、IIS 6 管理 兼容 器 以 及 FTP 发 布 服务 等 。 在 Web 服务 器 
服务 角色 列表 中 ,用 户 应 根据 网 站 的 开发 及 功能 选择 相应 的 项 目 , 这 些 选择 的 项 目 可 以 在 以 
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图 2-2 Windows Server 2008 服务 器 角色 列表 


SAPI 
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图 2-3 Web 服务 器 支持 选项 列表 . 
章 
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后 的 站 点 管理 中 进行 设置 。 

从 本 质 上 讲 , Web 服务 器 的 基本 功能 是 将 网 页 发 送 到 用 户 的 浏览 器 ,由 于 网 页 分 为 静 
态 页 面 和 服务 器 页 面 两 大 类 ,对 于 静态 网 页 , 即 不 包含 服务 端 脚 本 程序 的 页 面 ,Web 服务 器 
可 以 直接 发 送 到 用 户 的 浏览 器 。 但 是 ,对 于 服务 器 页 面 ,其 包含 的 脚本 程序 是 在 Web 服务 
器 端 执 行 的 。 谁 来 执行 这 些 服务 器 端的 脚本 程序 呢 ? 因此 , Web 服务 器 服务 角色 中 ,包含 
了 应 用 程序 开发 部 分 ,可 选择 ASP”ASP. NET" 等 服务 选项 ,以 确保 网 站 ASP 页 面 的 
执行 。 

根据 需要 选择 相应 的 服务 项 目 后 , 单 击 “ 下 一 步 ”按钮 ,显示 用 户 选择 安装 的 角色 服务 或 
功能 摘要 ,然后 单 击 “ 安 装 ” 按 钮 ,进行 Web 服务 器 (IIS) 的 安装 。 安 装 完成 后 ,返回 服务 器 
管理 器 ,在 服务 器 角色 列表 中 ,显示 安装 的 Web 服务 器 角色 ,如 图 2-4 所 示 。 
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图 2-4 服务 器 角色 列表 
在 Windows 服务 器 管理 器 窗口 ,显示 了 系统 已 经 安装 的 服务 器 角色 列表 。 在 该 窗口 
根据 需要 可 以 进一步 添加 新 角色 ,或 删除 已 有 角色 。 
2.2.3 Internet 信息 服务 管理 器 


当 添 加 了 Web 服务 器 角色 后 ,在 Windows 控制 面板 的 “管理 工具 ”中 ,还 增加 了 Web 
服务 器 角色 的 管理 工具 , 即 Internet 信息 服务 (IIS) 管 理 器 。 同 时 在 “计算 机 管理 控制 台 
中 ,在 “服务 和 应 用 程序 ”节点 下 增加 “Internet 信息 服务 节点。 通过 Internet 信息 服务 管 


理 器 ,可 以 进行 Web 站 点 的 创建 .配置 和 管理 等 操作 。 

打开 Windows 控制 面板 /管理 工具 文件 夹 ,运行 Internet 服务 (IIS) 管 理 器 程序 ,在 
“Internet 信息 服务 管理 器 ”程序 主 窗口 左 侧 的 控制 台 树 中 , 单 击 * 网 站 ?节点 ,在 控制 台 树 的 
右 侧 显示 网 站 功能 视图 及 操作 窗 格 ,如 图 2-5 所 示 。 


二 起 始 页 
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图 2-5 “Internet 信息 服务 管理 器 ”控制 台 


在 窗口 左 侧 的 控制 台 树 中 ,网 站 节点 包含 了 添加 Web 服务 器 角色 后 系统 自动 创建 的 
一 个 默认 Web 站 点 ,默认 网 站 主要 用 于 初学 者 学 习 。 如 果 在 添加 Web 服务 器 角色 时 , 选 
择 了 远程 维护 ,还 会 自动 创建 一 个 Administration 站 点 ,采用 端口 号 8098 ,访问 该 网 站 可 
以 对 Web 服务 器 实施 远程 维护 。 在 控制 台 窗 口 右 侧 是 网 站 管理 窗 格 ,可 以 新 建 、 配 置 用 
户 站 点 。 

安装 了 IIS 后 “Internet 信息 服务 管理 器 ”作为 一 个 管理 单元 ,还 将 被 组 织 到 “计算 机 管 
理 ” 控 制 台 中 。 在 “控制 面板 “管理 工具 ”中 ,双击 “计算 机 管理 "打开 “计算 机 管理 ”控制 台 ， 
可 以 看 到 “Internet 信息 服务 (IIS) 管 理 器 ?节点 ,其 管理 功能 和 独立 的 “Internet 信息 服务 管 
理 器 ”管理 工具 一 样 。 


2.3 创建 Web 站 点 


在 Windows 服务 器 系统 中 , 当 添 加 了 Web 服务 器 (IIS) 角 色 后 ,该 计算 机 就 可 以 作为 
一 台 Web 服务 器 了 。 通 过 ”Internet 信息 服务 管理 器 ”管理 工具 ,用 户 可 以 创建 一 个 或 多 个 
Web 站 点 ,为 用 户 提供 网 页 浏览 服务 。 





Web 服务 器 的 架设 和 管理 


地 四 


Web 技术 时 论 ( 艇 工 版 ) 





2.3.1 新 建 Web 站 点 


在 Windows 服务 器 中 ,不 同 的 IIS 版 本 ,创建 Web 站 点 、 配 置 和 管理 操作 不 尽 相 同 , 下 
面 我 们 仍 以 Windows Server 2008/IIS 7.0 为 例 , 介 绍 IS 中 Web 站 点 的 创建 过 程 。 

在 Windows 控制 面板 "管理 工具 ”中 ,双击 “Internet 服务 (IIS) 管 理 器 "程序 图 标 ,打开 
“Internet 信息 服务 管理 器 "程序 窗口 ,在 左 侧 的 控制 台 树 中 , 单 击 “ 网 站 ”节点 ,在 窗口 右 侧 
显示 网 站 操作 ( 见 图 2-5)。 在 网 站 操作 区 域 , 单 击 “ 添 加 网 站 …”, 打 开 “ 添 加 网 站 ”对 话 框 ， 
如 图 2-6 所 示 。 








2-6 JIS 7.0* 添 加 网 站 ”对 话 框 


在 “添加 网 站 ”对 话 框 中 ,可 以 输入 网 站 的 基本 信息 ,说 明 如 下 : 

(1) 网 站 名 称 , 是 在 “Internet 信息 服务 管理 器 "程序 窗口 控制 台 树 的 “网 站 ?节点 下 显示 
的 名 称 。 因 为 一 台 Web 服务 器 中 ,可 以 创建 运行 多 个 网 站 ,不 同 的 网 站 应 有 一 个 特定 的 名 
字 , 便 于 区 分 和 管理 。 

(2) 内 容 目 录 , 指 定 网 站 对 应 的 根 目 录 , 即 站 点 主 目录 ,网 站 的 所 有 内 容 , 包 括 网 页 文 
件 、 图 片 等 各 种 资源 ,都 应 存储 在 该 目录 下 。 从 组 成 上 来 讲 , 所 谓 一 个 “网 站 ”, 是 由 一 个 文件 
夹 及 其 包含 的 子 文件 夹 和 大 量 的 网 页 文件 、 图 片 等 资源 文件 构成 的 ,这 个 文件 夹 称 为 站 点 的 
主 目录 。 主 目录 保存 了 一 个 Web 站 点 中 的 所 有 内 容 , 包 括 各 个 子 文件 夹 以 及 所 有 的 网 页 文 
件 。 站 点 首页 文件 通常 存储 在 站 点 的 主 目录 下 。 

(3) 绑 定 , 包 括 站 点 的 绑 定 类 型 ,IP 地 址 和 端口 号 ,其 中 类 型 可 以 是 http 或 https( 加 密 
的 http),IP 地 址 选择 默认 的 全 部 未 分 配 ,端口 号 根据 站 点 需要 设置 , 若 服务 器 上 只 创建 一 
个 网 站 ,可 以 采用 HTTP 的 默认 端口 80 即 可 。 

如 果 要 运行 多 个 网 站 ,根据 OSI 参考 模型 ,所 有 计算 机 通信 程序 都 应 有 一 个 特定 的 端 
口号 , 它 是 通信 程序 发 送 和 接收 数据 的 依据 。 因 此 ,在 Web 服务 器 上 ,在 每 个 网 站 没有 注册 
域名 和 设置 主机 名 的 情况 下 ,应 设置 不 同 的 端口 ,如 8001.8002 ,以 区 分 不 同 的 网 站 。 为 网 
站 指定 80 以 外 的 端口 号 ,要 连接 到 该 站 点 ,在 网 址 (IP 地 址 或 域名 ) 后 需 指定 端口 号 ,一 般 
形式 为 http:// 网 址 : 端口 号 /。 


(4) 主机 名 , 即 站 点 的 DNS 域名 ,域名 需要 进行 域名 注册 ,需要 特别 注意 的 是 ,如 果 站 
点 设置 了 主机 头 , 即 使 运行 多 个 站 点 ,其 端口 号 必须 设置 为 HTTP 的 默认 端口 80 。 

根据 上 述说 明 , 对 新 建站 点 进行 设置 ,设置 完成 后 , 单 击 “ 确 定 ” 按 钮 ,返回 “Internet 信 
息 服务 管理 器 ”窗口 。 在 控制 台 目 录 树 的 “网 站 ”节点 可 以 看 到 增加 了 刚刚 添加 的 网 站 节点 ， 
如 图 2-7 所 示 。 
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图 2-7 “Internet 信息 服务 管理 器 ”窗口 


从 控制 台 网 站 列表 中 可 以 看 出 ,服务 器 上 目前 有 两 个 网 站 ,新 建站 点 “hao” 被 标记 为 “ 停 
止 ”, 这 是 因为 它 和 默认 站 点 “Default Web Site” 端 口号 冲突 造成 的 ( 均 为 80)。Windows 
JIS 支持 在 一 台 服 务 器 上 同时 运行 多 个 Web 站 点 ,多 个 站 点 同时 运行 ,主要 分 为 以 下 两 种 
情况 : 

(1) 每 个 站 点 具有 不 同 的 端口 号 ,可 以 为 每 个 Web 站 点 设置 一 个 1024 以 上 的 端口 号 ， 
例如 : 8001、8002 等 。 此 时 ,用户 通过 网 址 和 端口 号 访问 网 站 。 

(2) 为 每 个 Web 站 点 设置 不 同 的 主机 头 , 即 域名 ,站 点 都 使 用 HTTP 默认 端口 号 80。 

因此 ,根据 同时 运行 多 个 网 站 的 条 件 , 可 以 对 各 站 点 进行 配置 。 也 可 以 在 “Internet 信 
息 服务 管理 器 ”窗口 右 侧 窗 格 中 ,在 “管理 网 站 ”区 域 , 单 击 “ 启 动 “ 重 新 启动 或“ 停止" 超 链 
接 , 对 网 站 的 运行 进行 管理 。 当 管理 人 员 需 要 对 网 站 进行 维护 时 ,可 以 暂停 Web 站 点 ,站 点 
暂停 后 , 它 将 不 接受 客户 浏览 器 的 连接 ,等 用 户 工作 结束 后 ,再 启动 该 站 点 。 

网 站 建立 后 ,启动 网 站 ,在 右 侧 操作 窗 格 网 站 浏览 区 域 , 单 击 浏览 站 点 , 即 可 显示 站 点 首 
页 。 如 果 站 点 首页 文件 不 存在 , 则 显示 403 错误 。 
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2.3.2 规划 Web 站 点 结构 


我 们 已 经 看 到 ,在 IIS 中 创建 一 个 Web 站 点 的 过 程 非常 简单 ,主要 就 是 设 定 端口 号 、 主 
目录 和 主机 头 。 其 中 , 主 目录 即 站 点 的 根 目 录 , 它 包含 了 网 站 的 全 部 内 容 , 包 括 网 页 文件 、 图 
片 文 件 及 其 他 各 类 文件 ,以 及 相关 的 数据 库 文件 。 为 网 站 管理 和 扩展 方便 , 主 目录 中 又 分 为 
若干 子 目 录 , 对 网 站 中 的 各 种 文件 进行 分 类 管理 。 

在 新 建 网 站 时 ,只 要 指定 一 个 主 目录 即 可 ,网 站 的 内 容 可 以 没有 ,用 户 可 以 根据 网 站 的 
功能 需要 ,不 断 地 将 网 页 等 文件 保存 到 主 目 录 或 相应 的 子 目 录 中 。 通 常情 况 下 ,一 个 网 站 会 
包含 大 量 的 网 页 .图片 及 各 类 多 媒体 文件 ,文件 数量 众多 ,为 便于 站 点 的 管理 和 维护 ,文件 夹 
的 结构 ,命名 ,以 及 文件 命名 和 编码 的 设计 至 关 重要 。 

1. 规划 网 站 文件 夹 结构 

一 个 网 站 ,就 是 一 个 Web 应 用 ,应 该 根据 用 户 需求 来 设计 网 站 的 功能 ,每 一 项 功能 都 有 
大 量 的 网 页 文件 来 实现 。 为 了 管理 方便 ,应 该 根据 网 站 功能 对 网 站 文件 夹 结 构 进 行 认真 规 
划 。 一 般 情 况 下 ,在 主 目录 文件 夹 下 通常 需要 创建 多 个 子 文件 夹 ,每 个 子 文件 夹 对 应 网 站 
的 一 个 功能 ,存储 相关 的 网 页 文件 。 对 于 一 些 公用 的 程序 、 图 片 或 样式 定义 文件 ,可 以 定 
义 单独 的 文件 夹 进 行 存储 。 此 外 ,还 可 以 规划 数据 库 文件 夹 , 存 储 网 站 用 到 的 数据 库 文 
件 , 而 不 是 将 数据 库 文 件 存储 在 数据 库 管 理 系 统 (DBMS) 上 默认 的 目录 中 ,这 样 更 便于 整个 
网 站 的 备份 。 

对 于 刚刚 新 建 的 网 站 ,假设 该 网 站 设计 有 4 个 主要 功能 : 账户 管理 .新 闻 公 告 . 站 内 消 
息 和 个 人 中 心 ,在 主 目录 下 可 以 分 别 创建 4 个 文件 夹 ,分 别 存 储 开发 账户 管理 .新 闻 公 告 .站 
内 消息 和 个 人 中 心 所 用 到 的 网 页 文件 ,文件 结构 如 图 2-8 所 示 。 
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2-8 站 点 主 目录 下 的 内 容 组 织 


其 中 ,admin 为 管理 员 角 色相 关 页 面 ,accounts 存储 账户 管理 相关 页 面 ,sitenews 存储 
新 闻 公 告 页 面 ,sitemessage 存储 站 内 消息 页 面 ,usercenter 存储 个 人 中 心 页 面 。 除 此 之 外 ， 
pubess 存储 站 点 样式 定义 文件 ,pubprog 存储 站 点 公共 程序 页 面 ,database 存储 数据 库 文 
件 ,images 存储 站 点 公共 的 图 片 文 件 。 在 每 一 个 功能 模块 文件 夹 ,也 可 以 进一步 设 定 子 文 
件 夹 ,例如 , 设 images 保存 该 功能 模块 中 用 到 的 图 片 文件 。 

2. 文件 夹 和 文件 的 命名 

在 开发 实践 中 ,为 了 管理 方便 ,在 命名 文件 和 文件 夹 时 ,需要 遵循 下 面 几 条 一 般 性 的 命 
名 原则 : 

(1) 使 用 名 称 前 缀 。 因 为 文件 和 文件 夹 列表 通常 按照 字母 顺序 ,因此 ,可 以 将 功能 相近 
的 文件 夹 或 文件 ,使 用 相同 的 名 称 前 级 ,从 而 保证 列表 时 能 够 挨 在 一 起 。 例 如 ,存储 公共 样 
式 表 文件 和 公用 程序 页 面 文件 的 文件 夹 可 命名 为 pubcss 和 pubprog, 以 使 得 文件 列表 时 ， 
两 个 文件 夹 离 得 相近 。 

(2) 使 用 名 称 后 级 或 序号 。 许 多 功能 可 以 分 成 几 个 步骤 ,每 一 个 步 又 可 能 是 一 个 网 页 
文件 ,为 了 管理 方便 ,在 命名 这 些 网 页 文件 时 ,可 以 在 名 称 后 面部 分 添加 序号 或 后 级 ,这 样 可 
以 保证 在 列表 中 ,这 些 文件 是 顺序 相连 的 。 

例如 ,用 户 注册 功能 ,操作 的 数据 是 用 户 账户 基本 信息 ,数据 操作 包括 表单 填写 .存储 、 
查询 .修改 .删除 等 ,其 页 面 文件 可 分 别 命名 为 : useraccount-add( 注 册 信息 填写 表单 页 面 )， 
useraccount -addsave( 数 据 保 存 页 面 ) ,useraccount -search( 用 户 查 询 页 面 ) .useraccount - 
searchresult( 查 询 结 果 页 面 ),useraccount -modi( 修 改 页 面 ) ,useraccount -modisave( 修 改 结 
果 存 储 页 面 ),useraccount-del( 删 除 账户 页 面 )。 

(3) 大 小 写 问 题 。 有 的 Web 服务 器 (例如 Tomcat) 区 分 文件 夹 和 文件 名 大 小 写 ,命名 
时 要 注意 。 

(4) 避免 中 文 命名 。 因 为 有 些 Web 服务 器 对 中 文 命名 不 支持 ,在 命名 文件 夹 和 文件 名 
时 ,尽量 避免 中 文 名 。 

3. 网 站 首页 

一 般 情况 下 ,传统 应 用 程序 都 是 基于 窗口 的 ,有 一 个 主 窗口 ,包含 菜单 栏 \、 工 具 条 等 ,用 
户 通过 菜单 命令 或 工具 按钮 执行 特定 的 程序 功能 。 在 B/S 结构 中 ,一 个 网 站 (Web 应 用 ) 则 
是 从 网 站 首页 开始 的 ,相当 于 传统 应 用 程序 的 主 窗口 。 

首页 是 当 客户 连接 到 一 个 站 点 时 首先 看 到 的 Web 页 面 。 在 设计 Web 站 点 的 首页 时 ， 
不 仅 要 考虑 页 面 的 外 观 、 栏 目 布 局 ,更 重要 的 是 在 页 面 内 容 上 必须 包含 可 以 到 各 种 功能 页 面 
的 超 链 接 。 首 页 文件 通常 需要 保存 在 Web 站 点 主 目录 下 。 当 用 户 访问 一 个 网 站 ,在 URL 
中 未 指定 目录 和 网 页 文件 时 , Web 服务 器 将 把 站 点 首页 发 送 给 客户 浏览 器 。 


2.3.3 访问 Web 站 点 


网 站 (Web 站 点 ) 是 由 主 目录 及 其 包含 的 一 系列 文件 夹 和 网 页 文件 构成 的 ,每 个 站 点 都 
有 一 个 首页 文件 。 用 户 访问 网 站 即 是 通过 Web 浏览 器 并 从 站 点 中 下 载 网 页 文件 的 过 程 ,要 
连接 到 一 个 Web 站 点 ,应 该 在 浏览 器 地 址 栏 中 输入 要 下 载 页 面 的 URL ,一 般 形 式 为 : 


http:// 网 址 [: 端 口号 ][/[ 路 径 / 文 件 名 ]][? 参 数 名 = 参数 值 & 参 数 名 = 参数 值 …] 
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其 中 : 

(1) 网 址 。 可 以 是 域名 ,也 可 以 为 IP 地 址 , 它 确定 了 互联 网 中 要 访问 的 计算 机 。 端 口 
号 是 创建 网 站 时 设置 的 端口 号 ,默认 值 为 860。 如果 端 口号 为 80, 则 在 URL 中 可 以 省 略 
不 写 。 

(2) 路 径 。 指 相对 于 Web 站 点 主 目录 的 相对 路 径 , 如 果 不 指定 路 径 , 则 代表 站 点 主 目 
录 , 站 点 根 即 紧 接 在 网 址 (端口 ) 后 面 的 “/”, 后 面 是 根 目 录 下 的 子 目 录 。 

(3) 文件 名 。 访 问 一 个 Web 站 点 , 即 从 Web 站 点 中 指定 的 路 径 中 下 载 文件 ,并 传输 到 
客户 端 浏览 器 进行 显示 的 过 程 。 因 此 ,在 URL 中 需要 指定 要 下 载 文件 的 路 径 和 文件 名 。 
如 果 未 指定 文件 名 , 则 代表 要 下 载 网 站 首页 文件 ,首页 文件 在 Web 站 点 属性 中 设置 ,并 存储 
在 Web 站 点 根 目 录 中 。 

(4) 参数 表 。 在 访问 一 个 网 页 文件 时 ,特别 是 带 有 脚本 的 网 页 ,有 时 候 需要 将 一 些 参数 
传 给 网 页 中 的 脚本 程序 ,这 些 要 传递 的 参数 在 文件 名 后 面 的 ?后 面 列 出 , 即 一 系列 的 参数 
名 /参数 值 对 ,参数 名 /参数 值 对 之 间 用 字符 “&” 分 开 。 

安装 IIS 后 ,系统 自动 创建 一 个 默认 网 站 Web Default Site, 用 户 在 浏览 器 的 地 址 栏 中 
输入 “http://127. 0. 0. 1/ 或 http://localhost/”, 可 以 来 访问 该 Web 站 点 ,如 果 IIS 网 站 创 
建成 功 , 则 显示 一 个 IIS 默认 网 站 的 默认 网 页 。 

在 Windows 系统 中 ,都 包含 一 个 hosts 文件 (文本 文件 ,无 扩展 名 ,存储 在 \WINNT\ 
system32\drivers\etc 文件 夹 中 ) ,该 文件 用 于 本 地 域名 解析 。 默 认 情 况 下 ,包含 一 条 记录 ， 
即 “127.0. 0. 1 localhost”, 说 明 localhost 为 本 机 127. 0. 0. 1 的 域名 。 用 户 可 以 添加 域名 解 
析 记 录 , 许 多 挂 马 网 站 会 修改 用 户 Windows 系统 中 的 hosts 文件 ,以 达到 欺骗 用 户 访问 和 
改变 用 户 访 问 目的 网 站 的 目的 。 


2.4 Web 站 点 的 配置 


在 Windows Server/IIS 中 , 当 创 建 一 个 Web 站 点 时 ,我 们 给 这 个 站 点 设置 了 端口 号 、 
主 目录 和 主机 名 。 对 于 一 个 网 站 ,除了 这 些 基 本 信息 外 ,站 点 默认 文档 .HTTP 头 、 错 误 页 、 
安全 性 等 信息 也 是 一 个 网 站 相关 数据 的 组 成 部 分 。 站 点 相关 的 所 有 数据 都 可 以 在 站 点 创建 
完成 后 进行 修改 和 设置 ,这 种 设置 称 为 站 点 配置 。 站 点 配置 需要 通过 “Internet 信息 服务 管 
理 器 ”进行 ,配置 方法 简单 。 


2.4.1 网 站 端口 号 与 主机 名 设置 


在 “Internet 信息 服务 管理 器 "中 , 单 击 需 要 配置 的 网 站 节点 ,在 网 站 信息 区 域 ,选择 功 
能 视图 选项 卡 , 显 示 网 站 可 设置 的 项 目 列表 ,如 图 2-9 所 示 。 

在 网 站 信息 功能 视图 中 , 列 出 了 创建 网 站 时 选择 的 Web 服务 器 (IIS) 角 色 服 务 项 目 , 对 
于 这 些 服务 角色 项 目 ,都 和 网 站 的 运行 有 关 。 单 击 某 个 项 目 ,在 右 侧 的 “操作 ” 窗 格 ,将 列 出 
该 项 目的 可 能 操作 ,通过 进行 不 同 的 操作 ,从 而 完成 网 站 的 相应 设置 。 

对 于 一 个 网 站 ,最 基本 的 配置 就 是 设置 所 绑 定 的 端口 号 和 主机 名 。 在 窗口 右 侧 的 操作 
区 , 单 击 * 绑 定 …”, 打 开 * 网 站 绑 定 ? 对 话 框 , 显 示 站 点 目前 的 绑 定 设置 , 单 击 已 有 的 绑 定 项 ， 
单 击 “ 编 辑 ” 按 钮 ,打开 “编辑 网 站 绑 定 ”对 话 框 ,如 图 2-10 所 示 。 


始 页 
白 旺 NCRE (NCRE\HaoXW) 
症 应 用 程序 池 
白 国 网 站 
由 国 Default Yeb Si 
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2-10 Windows IIS 7.0“ 编 辑 网 站 绑 定 ” 对 话 框 


在 “编辑 网 站 绑 定 ”对 话 框 ,可 以 修改 网 站 的 端口 ,需要 注意 的 是 ,如 果 设 定 了 主机 名 , 则 
端口 必须 设置 为 HTTP 默认 端口 80。 如 果 没 有 注册 DNS 域名 , 需 删除 主机 名 下 面 文本 框 
中 的 内 容 。 在 不 设置 主机 名 的 情况 下 ,可 以 设置 一 个 大 于 1024, 其 他 服务 未 使 用 的 值 作为 
网 站 端口 号 。 


2.4.2 设置 网 站 主 目录 


主 目录 是 一 个 网 站 的 根 , 网 站 的 所 有 文件 都 应 保存 在 主 目录 及 其 所 包含 的 子 目录 文件 
夹 中 ,或 者 通过 虚拟 目录 使 用 主 目录 外 的 物理 文件 夹 。 根 据 客户 访问 Web 站 点 的 验证 过 
程 , 当 用 户 通过 身份 验证 后 , 接 下 来 ,Web 站 点 会 根据 站 点 的 权限 设置 ,来 决定 可 以 提供 给 
用 户 的 服务 ,例如 从 网 站 浏览 网 页 (下 载 文 件 )、 上 传 文件 等 。 

在 “Internet 信息 服务 管理 器 ?中 , 单 击 需要 配置 的 网 站 节点 ,在 窗口 右 侧 的 操作 区 , 单 上 
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击 “ 基 本 设置 …”, 打 开 “ 编 辑 网 站 ”对 话 框 ,如 图 2-11 所 示 。 








2-11 Windows IIS 7.0* 编 辑 网 站 ”对话 框 


在 “编辑 网 站 ”对 话 框 ,显示 了 设置 的 网 站 根 目 录 , 单 击 后 面 按 钮 ,可 以 修改 站 点 根 目录 。 
一 般 情况 下 ,站 点 根 目录 不 能 设置 在 服务 器 的 系统 盘 中 。 保 存在 系统 盘 中 , 当 服 务 器 草木 马 
或 病毒 攻击 ,需要 进行 系统 重 装 时 ,系统 盘 被 格式 化 ,所 保存 的 数据 将 丢失 。 


2.4.3 网 站 默认 文档 设置 

当 用 户 通过 Web 浏览 器 连接 到 Web 站 点 时 ,在 URL 中 ,如 果 没有 指定 要 浏览 的 网 页 ， 
Web 服务 器 将 把 站 点 设 定 的 默认 文档 , 即 首页 文件 ,传送 给 用 户 浏览 器 。 网 站 的 默认 文档 
可 以 是 静态 页 面 htm 文件 ,也 可 以 是 ASP、JSP 等 包含 服务 端 脚本 服务 器 页 面 文件 。 

在 “Internet 信息 服务 管理 器 "中, 单 击 需 要 配置 的 网 站 节点 ,在 窗口 中 间 区 域 , 单 击 “ 功 


能 视图 ”, 显 示 Web 服务 器 角色 服务 列表 ( 见 图 2-9) ,双击 “默认 文档 ”, 显 示 默认 文档 选择 列 
表 , 如 图 2-12 所 示 。 
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图 2-12 网 站 默认 文档 设置 


根据 网 站 实际 情况 ,选择 网 站 默认 文档 , 即 站 点 首页 文件 。 站 点 默认 文档 需 保存 在 站 点 
根 目录 下 ,此 时 ,使 用 Windows“ 记 事 本 "程序 等 文本 编辑 器 或 网 页 制作 工具 ,编辑 一 个 简单 
的 网 页 作为 默认 文档 。 在 “Internet 信息 服务 管理 器 ”窗口 右 侧 浏览 网 站 区 域 , 单 击 浏 览 
站 ”, 可 以 检测 站 点 的 运行 情况 ,显示 网 站 默认 文档 页 面 。 


2.4.4 网 站 错误 页 编辑 


当 用 户 访问 一 个 网 站 时 ,如 果 所 要 访问 的 网 页 不 存在 ,或 者 站 点 正在 维护 或 停止 运行 ， 
Web 服务 器 将 给 用 户 返回 一 个 信息 反馈 页 面 , 或 者 称 为 错误 提示 页 。 在 IIS 中 , 当 创 建 网 站 
时 ,自动 地 定义 了 一 组 错误 提示 页 面 , 除 此 之 外 ,用 户 可 以 对 这 些 页 面 内 容 进行 个 性 化 的 修 
改 , 使 得 用 户 有 更 好 的 访问 体验 。 

在 “Internet 信息 服务 管理 器 "中 , 单 击 需要 配置 的 网 站 节点 ,选择 功能 视图 ( 见 图 2-9)， 
在 Web 服务 区 角色 服务 列表 中 ,双击 HTTP 功能 区 的 “错误 页 ”列表 项 ,显示 网 站 默认 的 错 
误 页 列表 ,如 图 2-13 所 示 。 


和 
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lh pplicationdost. config , Clocation path=“hao”> 


图 2-13 Windows IIS 7.0 网 站 错误 页 列表 


在 网 站 默认 的 错误 列表 中 , 列 出 了 所 有 的 错误 页 ,以 及 存储 的 目标 文件 夹 ,可 以 对 错误 
页 的 内 容 、 存 储 位 置 等 进行 修改 ,使 得 错误 提示 更 具有 针对 性 ,增强 用 户 的 访问 体验 。 


2.4.5 设置 网 站 HTTP 响应 头 


在 Web 的 HTTP 通信 中 ,通过 HTTP 头 可 以 在 Web 服务 器 和 Web 客户 机 之 间 交 换 
彼此 的 信息 ,从 而 可 以 更 好 地 进行 网 页 的 传输 .显示 和 控制 。 有 些 HTTP 头 可 以 在 网 页 的 
< head ></head > 标记 内 定义 ,也 可 以 通过 Web 服务 器 统一 设置 。HTTP 头 可 以 分 为 常用 
标 头 和 用 户 自 定义 HTTP 标 头 两 大 类 ,HTTP 常用 标 头 主要 指 网 页 的 有 效 期 设置 。 

在 “Internet 信息 服务 管理 器 ?中 , 单 击 需要 配置 的 网 站 节点 ,选择 功能 视图 ( 见 图 2-9)， 
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双击 “HTTP 响应 标 头 ”列表 项 ,在 右 侧 窗 格 的 操作 列表 中 ,有 “添加 …” 和 “设置 常用 标 
头 …” 两 种 操作 , 单 击 “ 设 置 常用 标 头 …”, 如 图 2-14 所 示 。 


er 人 出 Was Yeb 服务 器 添加 到 响应 中 的 
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2-14 Windows IIS 7.0“Internet 信息 服务 管理 器 ”窗口 


在 常用 HTTP 响应 头 设置 中 ,选择 “使 Web 内 容 过 期 " 复 选 框 ,可 以 设置 此 站 点 页 面 的 
内 容 有 效 期 。Web 服务 器 将 页 面 发 送 到 客户 端 时 .同时 也 发 送 了 网 页 的 有 效 期 。 

选择 “立即 ” 单 选 按钮 , 则 网 页 内 容 一 下 载 到 浏览 器 该 页 面 就 过 期 了 。 因 此 ,浏览 器 每 次 
连接 到 该 网 站 时 ,无 论 客户 端的 本 地 网 页 缓存 是 否 存在 对 应 的 页 面 ,页 面 都 会 被 重新 下 载 。 
它 适 合 于 一 些 显 示 即 时 行情 的 网 站 ,如 股市 行情 。 

选择 “之 后 ” 单 选 按钮 ,用 于 设置 网 页 经 过 几 天 后 过 期 。 

选择 “时 间 ” 单 选 按钮 ,用 于 设置 网 页 的 有 效 期 。 

在 网 页 浏览 中 ,缓存 技术 和 有 效 期 设置 可 以 提高 整个 互联 网 的 性 能 。 当 用 户 浏览 某 个 
网 页 时 , 它 首 先 要 检查 本 地 的 缓存 是 否 保 存 了 要 浏览 的 页 面 ,如 果 已 经 保存 该 页 面 ,还 要 检 
查 页 面 是 否 过 期 ,如 果 没 有 过 有 效 期 , 则 浏览 器 将 直接 从 本 地 缓存 打开 该 网 页 ,而 不 链接 
Web 服务 器 下 载 页 面 。 如 果 页 面 在 缓存 中 不 存在 ,或 者 存在 但 已 经 过 了 有 效 期 ,此 时 , Web 
浏览 器 将 连接 Web 服务 器 ,进行 页 面 下 载 。 对 于 许多 网 页 (例如 一 些 文件 ) ,其 内 容 并 不 更 
新 ,因此 缓存 技术 可 以 提高 浏览 速度 ,减少 互联 网 流量 。 

除了 HTTP 常用 标 头 外 ,用 户 还 可 以 设置 自 定义 HTTP 响应 头 ,在 右 侧 的 操作 区 域 ， 
单 击 “ 添 加 …”, 打 开 “ 添 加 自 定义 HTTP 响应 头 ” 对 话 框 ,可 以 添加 响应 头 名 称 和 取 值 。 
Web 站 点 设置 了 HTTP 响应 头 后 , 当 用 户 浏览 网 页 时 ,Web 服务 器 将 标 头 一 起 发 送 到 客 
户 端 。 


2.4.6 网 站 安全 性 设置 


在 互联 网 中 ,Web 服务 器 会 收 到 各 种 各 样 的 页 面 访问 请 求 , 保 证 服务 器 的 安全 性 至 关 
重要 。 从 Web 工作 原理 上 讲 , 当 用 户 通过 Web 浏览 器 发 出 访问 某 个 页 面 的 请 求 时 ,Web 服 
务 器 收 到 客户 的 请 求 后 ,可 以 利用 HTTP 请 求 包 获取 客户 端的 信息 ,并 启动 一 个 验证 过 程 ， 
例如 ,网 站 是 否 允许 匿名 访问 ,客户 端 IP 地 址 是 否 受 限 等 ,来 决定 是 否 将 网 页 传 给 客户 端 。 

不 同 的 Windows Server/IIS 版 本 .Web 站 点 安全 性 设置 的 内 容 也 不 完全 一 样 ,传统 的 
安全 性 身份 包括 匿名 访问 、 身 份 验 证 和 访问 控制 ,IP 地 址 和 域名 限制 等 。 要 进行 相应 的 安 
全 性 设置 ,需要 在 Windows 2008/IIS 7.0 安装 过 程 中 ,选择 相应 的 安全 性 功能 ,只 有 安装 了 
相应 的 功能 ,才能 对 网 站 进行 相应 的 设置 。 

1. IP 地 址 及 域名 限制 

在 “Internet 信息 服务 管理 器 "中 , 单 击 需 要 配置 的 网 站 节点 ,在 站 点 信息 区 域 ,选择 功 
能 视图 ( 见 图 2-9) ,双击 "IPv4 地 址 和 域 限制 ?列表 项 ,显示 网 站 IPv4 地 址 和 域 限 制 设置 界 
面 ,如 图 2-15 所 示 。 


| @。IPv4 地 址 和 域 限制 添加 多 许 条 目 


| 名 局 添加 拒 绝 条 目 . . 。 
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图 2-15 设置 网 站 “IPv4 地 址 和 域 限制 "界面 


在 右 侧 操作 区 , 单 击 “ 添 加 允许 条 目 …”, 打 开 “ 添 加 允许 限制 规则 ”, 可 以 指定 允许 访问 
的 IP 地 址 或 一 个 地 址 范围 。 单 击 “ 添 加 拒绝 条 目 …”. 可 以 添加 网 站 要 拒绝 访问 的 IP 地 址 
或 一 个 地 址 范围 。 通 过 上 述 设 置 , 可 以 拒绝 那些 不 受 欢迎 的 IP 地址 对 站 点 的 访问 , 当 用 户 
来 自 拒绝 访问 的 IP 地址 时 ,客户 浏览 器 端 会 收 到 “您 没有 权限 查看 网 页 ”的 提示 信息 。 一 般 
情况 下 ,如果 网 站 是 公开 的 ,一 般 选 择 “ 添 加 拒绝 条 目 …”, 把 不 被 欢迎 的 IP 地 址 列 出 。 相 
反 , 如 果 网 站 是 一 个 特殊 的 站 点 ,只 允许 部 分 人 访问 , 则 选择 “添加 允许 条 目 …”, 然 后 把 可 以 




















Web 服务 器 的 架设 和 管理 


地 四 


Web 黄 太 时 论 ( 稀 工厂) 





访问 的 IP 列 出 。 

2. 匿名 访问 和 验证 控制 

当 Web 站 点 验证 了 客户 端的 IP 地 址 后 , 接 下 来 查看 该 站 点 是 否 允 许 匿名 访问 。 当 
Web 站 点 允许 匿名 访问 时 ,客户 端 不 需要 输入 账户 和 密码 就 可 以 访问 网 站 的 数据 ,此 时 
Web 站 点 会 尝试 用 Internet Guest Account 内 部 账户 *IUSER” 登 录 计算 机 。 如 果 站 点 不 允 
许 匿 名 访问 ,或 者 客户 端 要 访问 的 文件 有 特殊 的 安全 限制 ,此 时 客户 端 需要 输入 用 户 账户 和 
密码 。 

对 于 一 台 Web 服务 器 , 当 添 加 Web 站 点 时 ,如 果 选 择 了 身份 验证 等 Web 服务 器 角色 
服务 选项 ,在 IIS 信息 服务 管理 器 窗口 ,将 显示 站 点 的 身份 验证 选项 ( 见 图 2-9) ,双击 该 项 
目 ,显示 网 站 的 身份 验证 选项 ,如 图 2-16 所 示 。 
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图 2-16 设置 网 站 “身份 验证 "界面 


单 击 身份 验证 ,在 右 侧 的 “操作 ” 窗 格 ,可 以 将 该 身份 验证 设置 为 禁用 或 启用 ,也 可 以 进 
行 编辑 。 例 如 ,选择 “匿名 身份 验证 ”, 单 击 “ 编 辑 ", 打 开 “ 匿 名 用 户 账号 "对话 框 。 在 该 对 话 
框 中 ,可 以 指定 用 于 匿名 访问 的 匿名 用 户 账号 。 匿 名 访问 使 得 每 个 人 都 可 以 使 用 上 述 账 号 
访问 Web 网 站 。 如 果 匿 名 账户 没有 足够 的 NTFS 权限 ,系统 会 根据 在 “验证 访问 ”区 域 中选 
择 的 验证 方式 ,要 求 用 户 输入 账号 和 密码 ,如果 未 选择 任何 验证 方法 , 则 系统 不 提示 用 户 输 
入 账户 和 密码 ,而 是 直接 拒绝 用 户 对 该 页 的 访问 。 


2.5 使 用 Apache 和 Tomcat 


在 互联 网 中 ,Web 服务 器 的 配置 环境 主要 有 两 个 大 类 ,一 类 是 Windows 服务 器 /IIS, 另 
一 类 是 UNIX(Linux)/Apache 十 Tomcat。IIS 作为 Windows 服务 器 的 内 置 服务 组 件 , 具 有 


安装 方便 .配置 简单 的 优点 。 但 是 ,IIS 主要 支持 ASP 和 . NET 开发 ,对 于 网 络 开发 流行 的 
Java 程序 ,IIS 并 不 支持 。 此 外 ,IIS 只 能 安装 在 Windows 服务 器 上 ,如 果 服 务 器 安装 更 加 
安全 的 UNIX 和 Linux 操作 系统 ,也 无 法 安装 IIS 作为 Web 服务 器 。 针 对 WindowsVIIS 安 
装 的 限制 及 不 足 , 在 UNIX/Linux 服务 器 中 ,通常 安装 Apache/Tomcat 来 搭建 Web 服 
务 器 。 


2.5.1 Apache 与 Tomcat 


1993 年 ,美国 伊利 诺 伊 大 学 香槟 分 校 的 国家 超级 计算 应 用 中 心 (National Center for 
Supercomputer Applications, NCSA) 发 布 了 其 第 一 款 Web 服务 器 程序 httpd, 这 是 一 个 功 
能 强大 的 Web 服务 器 程序 , 且 代 码 可 以 自由 下 载 、 修 改 与 发 布 。1994 年 ,许多 Web 技术 的 
爱好 者 和 用 户 在 httpd 1. 3 代码 基础 上 开发 自己 新 的 功能 ,这 些 扩充 的 功能 以 补丁 
(Patches) 的 形式 出 现 。1995 年 2 月 底 , 这 些 开 发 者 们 创立 了 一 个 邮件 列表 ,并 以 此 为 媒介 ， 
交流 开发 的 成 果 , 把 代码 重 写 与 维护 的 工作 有 效 组 织 起 来 ,他 们 逐渐 把 这 个 开发 群体 称 为 
Apache 组 织 ?, 并 将 其 研发 的 Web 服务 器 程序 命名 为 Apache 服务 器 ,简称 Apache。 

1995 年 4 月 ,Apache 0.6.2 公 布 。 随 后 开发 人 员 再 接 再 厉 ,在 一 年 之 内 ,Apache 服务 
器 超过 了 NCSA 的 httpd 成 为 Internet 上 排名 第 一 的 Web 服务 器 。1999 年 7 月 ,Apache 
组 织 创立 Apache 软件 基金 会 (Apache Software Foundation ,ASF) , 它 是 专门 为 支持 开源 软 
件 项 目 而 创办 的 一 个 非 盈 利 性 组 织 。2004 年 .Apache 2. 0 发布, 新 的 版 本 不 再 包含 NCSA 
代码 ,2012 年 ,Apache 发 布 Apache 2.4 版 本 。 

1. Apache 的 功能 

Apache 是 一 款 Web 服务 器 ,全 称 Apache HTTP Server, 简 称 Apache。 它 是 目前 互联 
网 上 安装 最 多 的 Web 服务 器 ,不 管 是 Windows,UNIX 还 是 Linux 服务 器 ,都 有 相应 的 
Apache 版 本 , 它 可 以 运行 在 几乎 所 有 广泛 使 用 的 计算 机 操作 系统 平台 上 。 

Apache 服务 器 以 高 效 、 稳 定 、 安 全 .免费 而 著称 ,具有 以 下 特性 : 

。 支持 HTTP/1. 1 通信 协议 。 

。 支持 基于 IP 和 基于 域名 的 虚拟 主机 。 

。 支持 多 种 方式 的 HTTP 认证 。 

。 提供 用 户 会 话 过 程 的 跟踪 。 

。 支持 通用 网 关 接口 CGI。 

。 集成 Perl 处 理 模块 。 

。 集成 代理 服务 器 模块 。 

。 支持 实时 监视 服务 器 状态 和 定制 服务 器 日 志 。 

。 支持 服务 器 端 包 含 指令 (SSI) 。 


@ Apache 组 织 的 诞生 富有 戏剧 性 . 当 NCSA 的 WWW 项 目 因 最 初 的 开发 人 员 离 去 而 停顿 后 ,那些 使 用 NCSA 
httpd 服务 器 的 人 们 开始 交换 他 们 对 httpd 的 修改 .补充 和 扩展 ,他 们 很 快 认识 到 成 立 管理 这 些 补丁 程序 的 论坛 是 必要 
的 ,这 样 Apache 组 织 就 诞生 了 。 

组 织 名 称 Apache 的 来 由 ,一 种 说 法 是 取 自 "补丁 "之 意 ,因为 它 是 在 httpd 代码 基础 上 不 断 地 打 补 丁 而 形成 的 。 也 
有 人 说 Apache 这 个 名 字 是 为 了 纪念 名 为 Apache( 印 地 语 ) 的 土著 美洲 印第安 人 ,因为 他 们 拥有 高 超 的 作战 策略 和 无 穷 
的 耐心 。 
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。 支持 安全 Socket 层 (SSL ) 。 

。 支持 FastCGI。 

。 通过 第 三 方 模块 可 以 支持 Java Servlet。 

。 拥 有 简单 而 强 有 力 的 基于 文件 的 配置 过 程 。 

基于 上 述 特 性 ,使 得 Apache 成 为 Web 服务 器 的 首选 ,几乎 所 有 大 型 的 Web 系统 都 选 
择 安 装 Apache 服务 器 。 

2. Tomcat 的 功能 

Tomcat 是 Apache 软件 基金 会 Jakarta 项 目 中 的 一 个 核心 项 目 , 由 Apache、Sun 和 其 他 
一 些 公 司 及 个 人 共同 开发 而 成 ,是 针对 Apache 服务 器 开发 的 JSP 应 用 服务 器 ,是 Java 
Servlet 和 Java Server Pages(JSP) 技 术 的 标准 实现 。Tomcat 有 两 个 方面 的 功能 : 

(1) 它 是 一 个 Web 应 用 服务 器 ,简单 讲 , 就 是 可 以 执行 Web 服务 器 页 中 的 服务 端 脚本 
程序 , 即 JSP 程序 和 Java 程序 。 通 常情 况 下 ,Apache 和 Tomcat 联合 工作 ,Apache 作为 
Web 服务 器 ,为 用 户 提 供 页 面 浏览 服务 。 当 网 页 为 服务 器 页 时 , Apache 将 网 页 传递 给 
Tomcat 应 用 服务 器 ,由 Tomcat 执行 其 中 的 服务 段 脚 本 程序 。 执 行 结果 返 给 Apache。 

(2) 具有 Web 服务 器 功能 ,为 了 简化 服务 器 配置 和 管理 等 ,在 Tomcat 中 ,内 置 了 
HTTP Server 功能 ,也 就 是 说 ,在 配置 一 台 Web 服务 器 时 ,如 果 服 务 器 的 负载 较 轻 , 可 以 不 
安装 Apache, 只 安装 Tomcat, 由 Tomcat 负责 网 页 浏览 服务 和 服务 器 页 面 解析 。 

实际 上 Tomcat 部 分 是 Apache 服务 器 的 扩展 ,但 它 是 独立 运行 的 ,所 以 当 运 行 Tomcat 
时 , 它 实际 上 作为 一 个 与 Apache 独立 的 进程 单独 运行 。 当 在 一 台 Web 服务 器 上 配置 了 
Apache 服务 器 ,可 利用 它 响应 对 HTML 页 面 的 访问 请 求 。 当 用 户 要 浏览 的 页 面 是 JSP 服 
务 器 页 面 时 ,Apache 则 调用 Tomcat, 由 Tomcat 执行 JSP 中 的 服务 端 脚本 程序 ,将 执行 结 
果 返 给 Apache, 然 后 Apache 再 将 结果 页 面 发 送 到 客户 端 浏览 器 。 


2.5.2 Apache 的 安装 与 配置 


Apache 服务 器 为 开源 软件 ,可 以 从 Apache 官方 网 站 (https://www. apache. org/) 下 
载 ,需要 注意 的 是 ,Apache 官方 网 站 使 用 的 是 加 密 的 https' 而 不 是 http 协议 。 在 Apache 
官方 网 站 首页 中 ,有 一 个 Apache Projects 列表 ,显示 Apache 项 目 超 链接 列表 , 单 击 HTTP 
Server 超 链接 ,将 打开 HTTP Server 项 目 页 面 (https://httpd. apache. org/)。 

1. 下 载 Apache 服务 器 

在 HTTP Server 项 目 页 面 (https://httpd. apache. org/) ,选择 要 下 载 的 Apache 版 本 。 
需要 说 明 的 是 ,版 本 不 一 定 是 最 新 的 ,但 一 定 要 选择 一 个 稳定 的 版 本 。 虽 然 Apache 官网 页 
面 不 断 变化 ,但 下 载 Apache 服务 器 的 基本 步骤 是 一 样 的 ,基本 可 以 分 成 以 下 几 个 步骤。 

(1) 在 Apache 官方 网 站 (https://www. apache. org/) 的 首页 ,在 APACHE PROJECT 
LIST 中 ,找到 HTTP Server 项 , 单 击 该 项 .打开 Apache HTTP Server 项 目 页 面 (https:// 
httpd. apache. org/) 。 

(2) 在 某 HTTP Server 版 本 区 域 , 例 如 Apache HTTP Server 2. 4. 20 Release, 单 击 
Download 超 链接 ,打开 HTTP Server 下 载 页 面 , 并 定位 到 具体 的 版 本 号 ,显示 下 载 选择 
列表 : 

。 Source: httpd-2. 4. 20. tar. bz2 [ PGP ] [ MD5 ] [ SHA1 ] 


。 Source: httpd-2. 4. 20. tar. gz [ PGP ] [ MD5 ][L SHA1 ] 

。 Binaries 

。 Security and official patches 

。 Other files 

。 Files for Microsoft Windows 

在 上 述 下 载 选项 中 ,前 两 种 方式 是 httpd-2. 4. 20 的 源 文件 压缩 包 ,tar. gz 和 tar. bz2 是 
Linux 下 常用 的 压缩 方式 。PGP 即 Pretty Good Privacy, 是 Apache 的 数字 签名 ,保证 用 户 
下 载 的 Apache 文件 是 正式 版 本 ; MD5 即 消息 摘要 算法 5,SHA1 为 Hash( 哈 希 表 ) 校 验 。 
为 了 文件 的 安全 性 ,保证 文件 没有 被 别人 算 改 过 ,文件 发 布 者 会 在 文件 发 布 的 同时 附 上 
MD5 、 哈 希 表 等 校 验 码 ,以便 用 户 下 载 后 进行 校 验 ,保证 文件 的 原始 性 和 安全 性 。 

Binaries 对 应 Apache HTTP Server 的 二 进 制 文件 下 载 , Apache 本 身 通 常 不 提供 
Apache 服务 器 的 二 进 制 版 本 ,用 户 要 使 用 二 进 制版 本 的 Apache HTTP Server, 可 以 单 击 
Binaries, 从 页 面 提供 的 镜像 站 点 中 ,选择 下 载 二 进 制 Apache 服务 器 。 

如 果 用 户 需 要 下 载 Apache 的 Windows 版 ,可 直接 单 击 Files for Microsoft Windows 
项 ,打开 Downloading Apache for Windows 页 面 ,页 面 列 出 了 几 个 常用 的 提供 Apache 服务 
器 二 进 制 文件 下 载 的 超 链接 ,包括 : 

。 Apache Haus 

。 Apache Lounge 

。 BitNami WAMP Stack 

。 WampServer 

。 XAMPP 

其 中 ,前 三 项 对 应 三 个 主要 的 发 行 Apache httpd 二 进 制 包 的 网 站 ,后 面 两 个 是 wamp 
以 及 xampp 集成 环境 ,除了 httpd, 还 包含 PHP、MySQL 等 。 可 以 单 击 前 面 三 个 网 站 的 任 
意 一 个 超 链接 ,选择 要 下 载 的 Windows 版 本 即 可 。 

(3) 从 Binaries 页 面 显示 的 可 用 下 载 网 址 中 , 单 击 常用 的 Apache Lounge 超 链 接 , 打 开 
Apache Lounge Webmasters 页 面 ,显示 了 要 下 载 的 Apache 2. 4. 20 版 本 的 二 进 制 文件 压缩 
包 及 各 种 验证 信息 。 选 择 Apache 2. 4. 20 Win64 版 本 ,下载 Apache 服务 器 二 进 制 文件 压 
缩 包 httpd-2. 4. 20-win64-VC14. zip, 保 存 到 本 地 硬盘 中 。 

2. 校 验 下 载 的 Apache 服务 器 

文件 下 载 完毕 后 ,为 了 安全 起 见 , 通 常 需 要 对 下 载 的 文件 进行 校 验 , 校 验 其 哈 希 值 、 
MD5 值 文件 大 小 等 信息 ,以 判断 该 文件 是 否 是 原始 的 文件 , 即 没有 被 别人 自 改 过 。 若 是 相 
同 , 则 就 是 原始 文件 ,可 以 使 用 ; 若是 不 同 , 则 文件 有 问题 ,就 不 要 使 用 该 文件 。 

用 户 可 以 从 网 上 搜索 下 载 相应 的 校 验 工具 ,在 校 验 工具 中 打开 下 载 的 文件 ,开始 校 验 ， 
将 得 到 一 系列 文件 信息 ,然后 和 站 点 提供 的 MD5、SHAI1 等 信息 比较 ,以 确定 下 载 的 文件 是 
不 是 原始 文件 ,或 已 经 被 修改 。 

3. Apache 的 安装 

对 于 Apache 的 安装 ,不 同 的 版 本 悬殊 较 大 。 在 早期 的 Apache 中 ,Apache HTTPd 以 
msi 的 形式 发 布 ,用 户 可 以 下 载 msi 文件, 它 是 一 种 可 以 安装 的 程序 包 文件 ,双击 带 . msi 扩 
展 名 的 文件 时 ,操作 系统 将 . msi 文件 与 Windows 安装 程序 关联 并 运行 客户 端 安装 程序 服 
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务 Msiexec. exe, 因 此 ,Windows 环境 下 安装 Apache 非常 简单 。 

在 新 的 Apache 版 本 中 ,Apache 二 进 制 发 行 版 以 zip 压缩 文件 发 布 ,没有 安装 程序 ,要 
使 用 Apache 服务 器 ,可 按 下 列 方式 操作 : 

(1) 将 Apache 服务 器 二 进 制 文件 压缩 包 httpd-2. 4. 20-win64-VC14. zip 解压 缩 , 得 到 
一 个 文件 夹 Apache24 ,里 面包 含 了 Apache 服务 器 的 所 有 文件 。 

(2) 将 Apache24 文件 夹 移动 到 计算 机 系统 盘 C 根 目录 下 ,作为 Apache 服务 器 的 安装 
目录 ,文件 夹 结构 如 图 2-17 所 示 。 


GO HR Apeche24 y bm ， -| 4 





2016/4/5 19:18 
2016/4/5 19:09 
2016/5/4 17:30 
2016/4/5 19:09 
2015/5/4 17:28 
2016/4/5 19:10 
2016/4/5 19:09 
2016/4/5 19416 
2016/4/5 19:09 
2016/4/5 19:09 
2016/4/5 19:09 
2016/4/5 19:09 
2016/4/5 19:16 
2016/4/5 19:09 
2016/4/5 19:15 

















图 2-17 Apache 安装 目录 文件 夹 结 构 


(3) 把 Apache 安装 成 Windows 后 台 服 务 。 在 Apache24\bin > 文件 夹 中 ,包含 服务 安 
装 httpd. exe 程序 。 要 安装 HTTP 服务 ,首先 需要 安装 相应 的 运行 包 , 例 如 上 面 下 载 的 是 
VC14 版 ,需要 先 安装 Microsoft Visual C++2015 Redistributable vc_redist_x64/86. exe, 该 
发 行 包 同 样 可 以 在 Apache Haus 网 站 和 Apache Lounge 网 站 页 面 找 到 , 单 击 下 载 ,并 安装 。 

安装 完成 后 , 即 可 执行 httpd. exe, 安 装 Apache 服务 ,具体 操作 是 : 在 Windows 命令 行 
方式 ,进入 C:\Apache24\bin >, 输 入 httpd -k install 命令 。 

在 安装 时 ,如 果 出 现 "(OS 5) 拒 绝 访 问 : AH00369: Failed to open the Windows service 
manager, perhaps you forgot to log in as a Administrator” 错 误 提示 信息 ,此 时 ,并 非 因为 当 
前 的 账户 不 是 管理 员 权 限 ,而 是 需要 以 管理 员 权 限 运 行 cmd 程序 。 此 时 ,在 “开始 "菜单 ,在 
搜索 框 中 输入 “cmd” ,显示 cmd. exe 程序 项 ,在 该 菜单 项 上 右 击 ,执行 “以 管理 员 身 份 运行 ” 
菜单 命令 ,打开 cmd 窗口 ,输入 上 述 命令 即 可 ,如 图 2-18 所 示 。 

对 于 上 述 启动 错误 信息 ,说 明 如 下 : 

RH005588, httpd. exe: Could not reliably determine the server's fully qualified do main name, 


using fe80:: fc76: abca: e24b: d490. Set the ' ServerName ' directive globally to suppress 
this message 





:windows\system32)cd、 


:Ved apache24 


: Apache24>cd bin 


talling the ‘Apache2.4° 

"Apache2.4’ service is successfully installed. 

ing httpd.conf ..- 
reported be corrected before the 

not reliably deternine the 
9e2:656F:3b2d. Set the 


: AHBGG72: 


1 — : AHGOGT: 
: could not bi -8:80 
: no listening socket a 


hutting down 
hneeei5: Unable to open logs 








\Apache24\bin> 








安装 Apache 服务 器 


这 是 一 条 不 影响 服务 的 提示 ,要 避免 该 提示 信息 ,打开 Apache 的 配置 文件 conf\httpd. 
conf 文件 ,找到 下 列 行 : 





# If your host doesn't have a registered DNS name, enter its IP address here. 
# ServerName www. example. com:80 


将 ServerName 设置 为 localhost:80, 并 将 前 面 的 
然后 重新 执行 httpd -k install 命令 ,显示 : 





: 释 符 # 删除 





Apache 2. 4: Service is already installed. 

4. 启动 Apache 服务 

在 早期 的 Apache 版 本 中 ,Apache 安装 后 在 Windows* 开 始 "菜单 中 包含 相应 的 菜单 命 
令 , 可 以 启动 Apache 服务 。 在 新 版 的 Apache 中 ,在 \ Apache24\ bin 文件 夹 ,包含 
ApacheMonitor. exe 程序 ,双击 该 程序 ,在 Windows 任务 栏 显 示 Apache Service Monitor 程 
序 图 标 , 单 击 该 图 标 ,将 打开 Apache Service Monitor 窗口 ,如 图 2-19 所 示 。 








Apache Service Monitor SW 5 | 








Star 





Di | 

















The Apache2 4 sevce t ating 
请 
Apache/2.4.20 (Win54) I 
| = == my J 











图 2-19 Apache Service Monitor 窗口 
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单 击 Start 按钮 ,可 启动 Apache 服务 。 如 果 服 务 启动 失败 ,可 能 是 以 下 情况 造成 的 : 如 
果 计 算 机 中 已 经 安装 了 IIS, 且 为 启动 状态 ,并 且 使 用 了 80 端口 ,因为 Apache 的 默认 端口 
也 为 80 ,此 时 ,Apache 将 无 法 正常 启动 。 如 果 安 装 了 迅雷 , 它 也 可 能 会 使 用 80 端口 ,这 也 
将 导致 Apache 不 能 正常 启动 。 

查看 80 端口 是 否 被 占用 ,可 以 在 Windows 命令 行 下 输入 下 列 命 令 : 


netstat 一 aon|findstr "80" 


如 果 80 端口 已 被 使 用 ,需要 先 关 闭 相关 程序 ,或 者 修改 Apache 默认 的 监听 端口 。 
要 修改 Apache 服务 默认 端口 ,打开 配置 文件 conf/httpd. conf ,搜索 “Listen 80”, 找 到 
下 列 行 : 


Listen 80 


可 将 端口 号 修改 为 80 端口 以 外 的 用 户 端口 ,例如 : 8001。 

保存 文件 ,在 Apache Service Monitor 窗口 , 单 击 Start 按钮 ,显示 Apache 服务 启动 正 
常 ,任务 栏 显示 图 标 名 。 此 时 运行 浏览 器 程序 ,在 地 址 栏 里 输入 “http://localhost: 8001/” 
或 “http://127. 0.0.1:8001/” 看 到 Apache 默认 网 站 首页 ,显示 “It works”, 说 明 Apache 服 
务 正 常 。 

在 Windows 控制 面板 /管理 工具 中 ,包含 “服务 "程序 (services. msc) ,运行 该 程序 ,也 可 
以 查看 日 前 系统 中 安装 和 运行 的 服务 及 其 运行 状态 。 

5. Apache 配置 

通常 情况 下 ,大 多 数 程序 在 运行 时 往往 会 用 到 一 些 特定 的 参数 ,例如 : Web 浏览 器 , 它 
会 用 到 存储 网 页 的 临时 文件 夹 ,收藏 夹 ,访问 过 的 站 点 列表 等 ,这 些 数据 是 在 软件 运行 过 程 
中 产生 的 ,数据 如 何 保存 ,保存 位 置 的 设 定 等 ,都 是 程序 参数 的 问题 。 在 大 多 数 浏览 器 中 ,都 
包含 了 “Internet 选项 …. "命令 ,可 以 设置 浏览 器 运行 时 的 相关 参数 值 ,参数 的 取 值 将 影响 
程序 的 运行 。 这 些 参数 在 程序 中 保存 在 哪儿 ,如何 保 存 ,用户 都 是 看 不 到 的 。 

对 于 Web 服务 器 , 它 所 管理 的 对 象 就 是 一 个 个 网 站 。 在 Windows /IIS 中 ,网 站 的 配置 
都 是 在 “Internet 信息 服务 管理 器 ”中 完成 的 ,配置 方法 直观 .简单 。Apache 服务 器 不 同 , 它 
的 配置 是 手工 完成 的 ,参数 及 其 设置 保存 在 一 个 特定 的 XML 配置 文件 中 ,Apache 服务 器 
在 运行 时 , 读 取 该 配置 文件 数据 ,以 便 正确 地 运行 。 因 为 ,XML 文件 是 一 个 文本 文件 ,可 以 
用 Windows“ 记 事 本 ”程序 打开 进行 编辑 ,手工 配置 虽然 不 够 直观 ,但 减少 了 开发 相应 配置 程 
序 的 工作 量 。 因 此 ,采用 XML 文件 进行 软件 运行 环境 及 参数 的 设置 是 软件 设计 的 发 展 方向 。 

在 Apache 中 , 主 配 置 文件 采用 XML 文件 格式 ,存储 在 \Apache\Conf\ 文 件 夹 中 ,文件 
名 为 httpd. conf。 在 单一 的 配置 文件 httpd. conf 中 ,存放 了 Apache 运行 时 所 有 的 配置 指 
令 , 如 : Web 服务 器 端口 ,网 站 主 目 录 ,客户 访问 信息 ,记录 认证 信息 和 虚拟 服务 器 信息 等 。 

Apache 配置 选项 采用 的 是 指令 模式 ,配置 指令 设 定 各 种 参数 的 值 , 例如 : 
DocumentRoot 设置 服务 器 Web 页 面 的 根 目录 。 也 可 以 灵活 地 设置 多 个 基于 IP 或 基于 域 
名 的 虚拟 Web 服务 器 ,这 些 Web 虚拟 服务 器 可 以 各 自 定义 独立 的 DocumentRoot 配置 指 
令 。 而 LoadModule 指令 则 用 来 指定 加 载 不 同 的 模块 来 实现 对 Apache 服务 器 功能 的 扩充 。 
这 些 新 功能 大 多 是 提供 服务 器 端 对 脚本 技术 的 支持 ,比如 Perl`PHP 等 。Apache 结合 使 用 
ApacheJServ 可 以 实现 对 Java servlet 及 JSP 的 支持 。 


Apache 主 配置 文件 httpd. conf 为 纯 文 本 文件 ,用 Windows“ 记 事 本 ”程序 打开 ,可 以 看 
到 这 些 配置 文件 配置 项 目 及 取 值 ,其 中 “# ”为 Apache 的 注释 符号 。 可 以 在 “记事 本 ”菜单 
中 ,使 用 “查找 ”命令 ,查找 要 配置 的 关键 字 , 并 进行 相应 配置 。 

(1) 配置 DocumentRoot 及 目录 访问 权限 。 

这 个 语句 指定 网 站 路 径 , 即 主页 放置 的 目录 。 默 认 路 径 一 般 是 Apache 安装 目录 下 的 
一 个 子 目 录 , 例 如: 


DocumentRoot "C:/Apache24/htdocs" 


根据 需要 ,设置 站 点 的 主 目录 ,例如 我 们 可 以 在 此 处 将 其 设 定 为 *“D:/bluesky”, 打 开 主 
页 时 ,默认 打开 的 文档 就 直接 去 该 目录 下 查找 了 。 

(2) 配置 DirectoryIndex。 

这 是 站 点 默认 显示 的 主页 ,一 般 情 况 下 ,我 们 在 此 处 还 可 以 加 入 “index. htm index. php 
index. jsp” 等 。 注 意 ,每 个 可 能 的 首页 文件 之 间 都 要 留 一 空格 。 

上 面 两 步 设置 完成 后 ,启动 浏览 器 ,在 地 址 栏 中 输入 “http://127.0.0.1:8001/” 即 可 访 
问 用 户 Web 站 点 , 即 显示 主 目录 “d:/bluesky” 中 的 首页 文件 index. htm。 此 外 ,用 户 还 可 以 
进一步 设置 站 点 域名 、 错 误 页 ,安全 性 等 。 


2.5.3 Tomcat 服务 与 Servlet/JSP 


Tomecat@ 服务 器 是 一 个 免费 的 开放 源 代码 的 Web 应 用 服务 器 ,是 Apache 软件 基金 会 
Jakarta 项 目的 一 个 子 项 目 ,Jakarta( 雅 加 达 ) 是 Apache 组 织 下 的 一 套 Java 解决 方案 的 开源 
软件 的 名 称 , 包 括 很 多 子 项 目 。 通 常情 况 下 ,Tomcat 作为 Apache 服务 器 的 扩展 ,用 于 运行 
JSP 页 面 中 的 Java 程序 ,是 Java Servlet 和 JSP 的 运行 容器 。 此 外 ,Tomcat 也 具有 处 理 静 
态 HTML 页 面 的 功能 ,只 是 其 处 理 HTML 的 能 力 比 Apache 服务 器 弱 。 

所 谓 Servlet ,就 是 用 Java 编写 的 Server 端 程序 ,在 基于 Java 的 Web 服务 器 上 运行 , 它 
的 主要 功能 是 交互 式 地 浏览 和 修改 数据 ,生成 动态 Web 内 容 。 与 普通 的 Java 程序 不 同 , 由 
于 Servlet 运行 于 Tomcat 等 容器 ,不 需要 特定 的 图 形 用 户 界面 ,因此 ,Servlet 又 称 为 
Faceless 对 象 。 在 功能 上 ,Servlet 可 以 完全 发 挥 Java API 的 优势 。 在 性 能 方面 ,Servlet 执 
行 一 次 以 后 ,会 停留 在 内 存 中 一 段 时 间 , 当 有 相同 的 请 求 发 生 时 ,Servlet 会 利用 不 同 的 线程 
来 处 理 , 在 性 能 上 会 有 大 幅 的 提升 ,而 服务 器 会 自动 清除 停留 时 间 过 长 而 且 没 有 执行 的 
Servlet 。 

在 编写 Web 应 用 系统 时 ,Servlet 虽然 性 能 优越 ,可 以 跨 平 台 运 行 , 通 过 form 表单 的 
action 调用 ,但 Servlet 在 和 静态 页 面 的 结合 方面 非常 麻烦 。 于 是 ,出 现 了 JSP(Java Server 
Page) 技 术 ,通过 在 HTML 页 面 中 插入 服务 端 标记 <% %>, 来 直接 书写 Java 代码 , 极 大 地 简 
化 了 页 面 设计 的 复杂 性 。 每 一 个 JSP 页 面 第 一 次 调用 时 都 被 自动 编译 成 一 个 Servlet, 然 后 


@ Tomcat 最初 是 Sun 开发 的 JavaWebServer 的 一 部 分 ,是 为 Java Servlet 技术 而 开发 的 ,是 Java Web 服务 器 内 置 
的 Java Servlet 引擎 。1999 年 , Sun 将 其 变 为 开源 项 目 并 将 其 源 代码 贡献 给 Apache 软件 基金 会 (Apache Software 
Foundation, ASF) ,和 ASF 中 类 似 的 项 目 进行 合并 ,成 为 ASF 组 织 Jakarta 项 目的 一 个 核心 子 项 目 。 由 于 对 于 大 部 分 开 
源 项 目 奥 莱 利 (O'Reilly) 出 版 公司 都 会 为 其 出 一 本 相关 的 书 ,并 且 将 其 封面 设计 成 某 个 动物 的 素描 ,因此 此 项 目 也 以 一 
个 动物 的 名 字 命 名 ,并 将 其 命名 为 Tomcat( 雄 性 猫 科 动物 ) 。 
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在 Tomcat 中 运行 。 在 JSP 页 面 中 ,还 可 以 导入 JavaBean, 它 是 一 个 Java 类 ,通过 封装 相应 
的 属性 和 方法 ,完成 特定 的 功能 。JavaBean 可 以 利用 Eclipse 等 开发 环境 以 可 视 化 的 方式 
来 开发 。 

在 第 1 章 的 Java 技术 中 ,我 们 已 经 介绍 了 Java 技术 的 构成 , 即 Java 技术 包括 三 个 部 
分 : Java 程序 设计 语言 .JDK 和 Java 虚拟 机 。 因 此 ,要 保证 Tomcat 运行 Java 代码 ,在 
Tomcat 运行 环境 ,必须 得 到 Java 的 支持 ,也 就 是 说 Tomcat 的 运行 需要 Java 运行 环境 的 
支持 。 

在 Tomcat 中 ,内置 了 一 个 简单 的 HTTP Server, 因 此 单独 安装 Tomcat 也 能 够 保证 一 
个 Web 站 点 的 运行 。 从 开发 的 角度 讲 , 要 测试 网 页 运行 情况 ,只 安装 Tomcat 就 可 以 了 。 
也 就 是 说 ,不 需要 安装 Apache 服务 器 ,单独 使 用 Tomcat 即 可 运行 Web 应 用 。 但 是 ， 
Tomcat 仅仅 对 JSP 程序 体现 出 比较 好 的 执行 效率 和 性 能 ,对 于 静态 页 面 的 处 理 速度 远 不 
如 Apache。 为 了 提高 Web 系统 的 整体 性 能 ,需要 将 Apache 和 Tomcat 进行 整合 配置 。 


2.5.4 安装 Java 运行 环境 


Tomcat 是 JavaServlet 和 JSP 的 容器 ,因此 ,Tomcat 需要 Java VM (JRE) (Java 
Runtime Environment), 即 Java 虚拟 机 的 支持 ,在 安装 Tomcat 以 前 需要 安装 JRE。JRE 可 
以 单独 安装 ,也 可 以 随 Java 开发 包 JDK 一 起 安装 。 安 装 JRE 后 ,在 安装 Tomcat 时 会 自动 
检测 到 。 

Java 技术 中 的 Java 运行 环境 包括 两 个 主要 部 分 : Java 开发 工具 包 和 Java 运行 环境 
JRE。 它 们 是 基于 Java 技术 开发 的 计算 机 应 用 系统 运行 的 基础 环境 。 在 Windows 平台 上 ， 
Java 环境 安装 完成 后 需要 进行 相应 的 操作 系统 环境 变量 设置 ,使 得 在 运行 JSP 页 面 时 能 够 
找到 相应 的 类 库 ,保证 程序 的 正常 运行 。 

1. JDK 和 JRE 

在 安装 Java 环境 以 前 ,需要 介绍 几 个 概念 。 在 Java 技术 中 ,大 家 经 常 看 到 JDK、 
J2SDK 和 JRE 等 概念 ,有 时 候 会 产生 迷惑 ,三 者 是 什么 意思 ,又 是 一 种 什么 关系 呢 ? JDK 
是 指 Sun 早期 的 Java 软件 开发 工具 包 (Java Develop Kit,JDK) ,是 开发 和 运行 Java 程序 的 
基础 ,经 历 了 多 个 版 本 的 升级 ,除了 技术 上 的 改进 外 ,也 包含 了 命名 方式 的 改变 。 

JRE(Java Runtime Environment) ,顾名思义 是 Java 程序 运行 所 需要 的 环境 。 所 谓 跨 
平台 就 是 要 各 种 平台 都 有 一 个 中 间 代 理 , 这 就 是 JRE。 一 般 采 用 Java 技术 开发 出 的 软件 都 
需要 安装 JRE, 所 以 Sun 就 单独 提供 了 JRE 安装 文件 ,以 供 Java 应 用 程序 发 布 时 所 用 。 

2. JDK 的 发 展 

1995 年 5 月 23 日 ,Sun 将 OAK 改 名 为 Java, 并 且 在 SunWorld 大 会 上 发 布 了 Java 1.0， 
Java 第 一 次 提出 了 “write once,run anywhere” 的 口号 。1996 年 1 月 23 日 .JDK 1.0 发 布 ， 
Java 有 了 第 一 个 正式 版 本 的 运行 环境 。JDK 1. 0 提供 了 纯 解释 执行 的 Java 虚拟 机 实现 
(Sun Classic VM) ,代表 技术 有 Java 虚拟 机 、AWT 和 Applet 等 。 

1997 年 2 月 ,Sun 公司 发 布 了 JDK 1. 1, 其 代表 技术 有 : JAR 文件 格式 、JDBC、 
JavaBean、RMI。1998 年 12 月 4 日 ,JDK 1.2 发 布 。 从 JDK 1.2 起 ,Sun 在 命名 时 开始 使 用 
Java 2, 这 就 是 J2SDK ,分 为 企业 版 (Enterprise Edition)J2EE、 标 准 版 (Standard Edition) 
J2SE 以 及 面向 嵌入 式 和 移动 计算 等 领域 的 J2ME(Micro Edition) 三 个 版 本 。 随 后 ,Sun 又 


陆续 发 布 了 JDK 1. 3(1999 年 4 月 ),JDK 1.4(2002 年 2 月 ),JDK 1.5(2004 年 9 月 )。 

2006 年 11 月 13 日 ,在 JavaOne 大 会 上 ,Sun 宣布 将 Java 开源 ,建立 开源 组 织 openJDK 
对 源码 进行 管理 。2006 年 12 月 11 日 ,JDK 1.6 发 布 ,终结 了 从 Java 1.2 开始 的 命名 习惯 , 采 
用 JavaSE6 .JavaME6 、JavaEE6 的 命名 方式 。 在 技术 上 的 改进 包括 : 提供 动态 语言 支持 ,提供 
编译 API 等 ,以 及 对 Java 虚拟 机 的 改进 ,包括 锁 与 同步 ,垃圾 收集 .类 加 载 等 方面 的 算法 。 

2009 年 4 月 20 日 ,Oracle 收 购 了 Sun 公司 。2011 年 7 月 ,JDK 7 发 布 。2014 年 3 月 ， 
Java 8 发 布 , 该 版 本 做 了 许多 重要 的 扩充 和 改进 ,包含 了 日 期 API、Streams API 和 
Lambda。 对 函数 式 编程 提供 了 支持 。 

2017 年 9 月 21 日 ,Java 9 发布 ,Java 9 的 核心 变化 就 是 引入 了 一 种 新 的 Java 编程 组 
件 ,也 就 是 模块 化 。 对 于 Java 技术 的 发 展 ,Oracle 表示 ,Java 10 将 继续 加 入 大 数据 、 多 语言 
互 操作 性 、 云 计算 和 移动 计算 等 功能 ,关于 JDK 10 以 及 之 后 的 版 本 也 在 讨论 中 ,比如 使 
Java 语言 面向 对 象 ,形成 一 个 统一 的 类 型 系统 ,所 有 原 语 都 将 转换 为 对 象 和 方法 。 

以 上 Java 软件 都 可 以 从 Sun 的 Java 网 站 DChttp:/Viava. sun. com) 上 获取 ,网 站 提供 了 
Java 平台 的 JDK JRE 各 种 版 本 以 及 Java 开发 工具 NetBeans( 含 JDK) 的 下 载 。 

3. 安装 JDK 和 JRE 

在 http://java. sun. com/ 站 点 ,提供 了 JDK 和 JRE 的 集成 安装 和 单独 安装 文件 ,用 户 
可 以 免费 下 载 。 目 前 较 新 ,同时 比较 稳定 的 版 本 是 JDK 8。 根 据 开发 和 应 用 的 不 同 , 可 以 选 
择 标 准 版 (Standard Edition) 或 企业 版 (Enterprise Edition) ,我 们 以 Java 标准 版 JDK 8 为 
例 ,介绍 JDK 和 JRE 的 安装 过 程 。 

首先 ,登录 Java 官方 网 站 http://java. sun. com/ ,进入 Oracle 站 点 Java 技术 页 面 ,在 
软件 下 载 区 域 (Software Downloads) , 单 击 Java SE 超 链 接 , 显示 Java JDK 和 JRE 下 载 界 
面 , 单 击 下载 JDK 8 ,显示 JDK 8 的 不 同 操作 系统 版 本 ,包括 : Linux x86/x64,Mac OS X， 
Solaris x64 以 及 Windows x86/x64 等 。 单 击 Windows x64 对 应 的 文件 ,文件 名 为 jdk- 
8u91-windows-x64. exe, 文 件 大 小 为 187MB ,包含 Java SE Develop Kit 8 Update91(64-bit) 
和 JRE 两 部 分 。 

接 下 来 进行 JDK 8 和 JRE 的 安装 ,双击 jdk-8u91-windows-x64. exe 文件 ,运行 Java SE 开 
发 工具 包 8 Update91 安装 向 导 , 显 示 信 息 提示 界面 ,然后 显示 定制 安装 界面 ,如 图 2-20 所 示 。 

在 Java 可 选 功能 列表 中 ,开发 工具 包含 了 JavaFX SDK., 一 个 公共 JRE 以 及 Java 
Mission Control 工具 套件 。 源 代码 包含 了 Java 公共 API 类 的 源 代码 ,可 以 选择 安装 。 公 
共 JRE 是 指 一 个 独立 的 JRE, 任 何 应 用 程序 (例如 Tomcat) 都 可 以 使 用 该 JRE, 它 将 Java 插 
件 和 Java Web Start 注册 到 系统 和 浏览 器 ,可 独立 于 JDK 进行 卸载 。 对 于 上 述 三 个 Java 功 
能 选项 ,可 以 同时 安装 ,也 可 以 分 别 安装 。 如 果 只 装 JDK( 包 含 一 个 专用 内 置 JRE) ,可 以 只 
安装 “开发 工具 ” ,不 安装 公共 JRE。 如 果 系 统 要 配置 Tomcat, 则 通常 情况 下 ,需要 安装 公共 
JRE ,和 否则 在 安装 Tomcat 时 ,Tomcat 安装 向 导 找 不 到 JVM 路 径 。 

对 于 每 一 项 功能 ,都 可 以 选择 单独 的 安装 路 径 。 默 认 情 况 下 ,各 功能 选项 安装 的 默认 文 
件 夹 为 C:\ Program Files\java\jdk1. 8.0 .91。 为 了 下 一 步 环境 变量 设置 的 方便 ,通常 需要 


Q@ Sun 被 Oracle 收购 后 , 原 有 的 Sun 的 域名 保留 ,但 会 被 自动 地 映像 到 Oracle 站 点 相应 页 面 ,例如 : http://www. 


oracle. com/technetwork/java/index. html。 
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去 半 到 : 
C:program FilesUavayk1.8.0.91\ 








2-20 Java SE 8 标准 版 安装 向 导 界 面 


修改 默认 安装 目录 。 例 如 ,选中 “开发 工具 "功能 选项 ,然后 单 击 “更 改 …” 按 钮 ,修改 开发 工 
具 (JDK) 的 安装 目录 ,将 其 直接 安装 在 C:\Java 目录 下 , 即 C:\Java\jdk1. 8.0_91\, 这 样 便 
于 下 一 步 环境 变量 的 设置 。 开 发 工具 安装 完成 后 ,将 在 C 盘 根 目 录 下 创建 文件 夹 C:\Java\ 
jdk1. 8. 0_91\ ,存储 安装 的 Java SE Development Kit 8 Update 91(64-bit) 文 件 。 

当 JDK 安装 完成 后 , 接 下 来 开始 安装 公共 JRE, 显 示 公 共 JRE 安装 目录 设置 界面 ,由 
于 公共 JRE 的 文件 夹 和 JDK 中 的 内 置 JRE 类 似 , 为 了 避免 混乱 ,可 以 将 公共 JRE 安装 路 径 
设置 为 C:\Java\jrel. 8.0_91, 从 而 将 公共 JRE 安装 到 一 个 单独 的 文件 夹 中 。 

安装 完成 后 ,安装 程序 在 C 盘 中 建立 相应 的 文件 夹 结构 ,存储 相应 的 JDK 运行 环境 以 
及 公共 JRE, 文 件 夹 结构 如 图 2-21 所 示 。 
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图 2-21 安装 JDK 后 的 文件 夹 结构 


对 于 上 述 文件 夹 结 构 ,Java 文件 夹 包 含 JDK 文件 夹 和 公共 JRE 文件 夹 ,其 中 ,JDK 文 
件 夹 所 包含 的 内 容 如 下 : 

。 bin 子 文件 夹 ,包含 一 组 用 于 Java 开发 .执行 .调试 的 工具 和 程序 ,例如 javac. exe 
(Java 编译 器 ) jdb. exe(Java 调试 器 ) java. exe(Java 解释 机 ) 、javah. exe( 产 生 可 以 
调用 Java 过 程 的 C 过 程 ,或 建立 能 被 Java 函数 调用 的 C 函数 的 头 文件 ) jar. exe 
(多 用 途 存档 及 压缩 工具 ,可 将 多 个 文件 合并 为 单个 JAR 归档 文件 ) 等 。 
db 子 文件 夹 ,Oracle 发 布 的 Apache 软件 基金 会 所 研发 的 开放 源码 数据 库 管 理 系 统 
Apache Derby ,包含 bin 和 lib 两 个 子 文件 夹 。 
include 子 文件 夹 ,包含 C 头 文件 ,支持 使 用 Java 本 机 界面 JVMTM 工具 界面 以 及 
Java 2 平台 的 其 他 功能 进行 本 机 代码 编程 的 头 文件 。 
lib 子 文件 夹 ,包含 开发 工具 需要 的 附加 类 库 和 支持 文件 。 
jre 子 文件 夹 , 它 是 JDK 内 置 的 JRE( 运 行 时 环境 ) ,包含 Java 虚拟 机 、 类 库 及 其 他 文 
件 , 可 支持 执行 以 Java 语言 编写 的 程序 。 

除了 上 述 的 文件 夹 外 ,安装 目录 下 还 包含 组 成 Java 2 核心 API 的 所 有 类 的 Java 编程 语 
言 源 文件 的 压缩 文件 src. zip 等 。 

在 Java SE 8 标准 版 安装 向 导 界 面 (图 2-20) ,如 果 不 选 择 安装 “公共 JRE” 功 能 选项 ,将 
不 会 创建 公共 JRE 对 应 的 文件 夹 结构 。 此 时 ,如 果 在 后 面 安 装 Tomcat, 需 要 JVM 支持 时 ， 
将 找 不 到 可 以 使 用 的 JRE。 

对 于 上 述 安装 的 JDK 或 公共 JRE,. 用 户 可 以 通过 “控制 面板 ”中 的 “添加 /删除 程序 ”分 
别 单独 删除 ,系统 删除 程序 将 自动 删除 安装 程序 在 计算 机 硬盘 中 创建 的 相应 文件 夹 。 但 不 
会 修改 接 下 来 用 户 设 置 的 系统 环境 变量 。 

3. Java 环境 变量 设置 

在 Windows 中 ,JDK 安装 完成 后 ,进入 Windows 系统 的 cmd 命令 行 窗 口 ,运行 javac 
等 可 执行 程序 ,系统 提示 “不 是 可 运行 的 程序 ”, 表 明 操 作 系 统 找 不 到 相应 的 文件 。 因 此 , 当 
Java 安装 完成 后 ,要 开发 和 运行 Java 程序 ,还 需要 进行 相应 的 环境 变量 设置 ,以 保证 操作 系 
统 查找 Java 可 执行 程序 ,或 Java 程序 中 对 JDK 类 库 的 引用 。 需 要 进行 的 环境 变量 设置 包 
括 : 设置 JAVA_HOME、CLASSPATH 环境 变量 和 更 新 PATH 路 径 设置 三 个 部 分 。 

为 了 检查 JDK 安装 程序 是 否 已 经 正确 地 设置 了 环境 变量 ,可 以 使 用 set < 环境 变量 > 来 
检查 ,具体 办 法 是 : 

在 Windows 开始 菜单 ,搜索 cmd 命令 ,找到 后 运行 该 程序 ,打开 Windows 命令 行 窗口 。 
在 DOS 提示 符 下 ,通过 set < 环境 变量 > 命令 显示 环境 变量 的 配置 情况 。JDK 8 安装 完成 
后 ,环境 变量 设置 检查 结果 显示 如 图 2-22 所 示 。 

如 果 安 装 程序 没有 设置 Java 运行 环境 需要 的 环境 变量 ,应 该 进行 手工 设置 。 根 据 上 述 
的 JDK 安装 路 径 , 设 置 内 容 如 下 : 


set JAVA HOME = C:\Java\jdk1.8.0_91 


set CLASSPATH =. ;%JAVA_HOME%ANlib( 注 意 ,“. ;” 一 定 不 能 少 , 它 代表 当前 路 
。 分 号 是 不 同 路 径 之 间 的 分 隔 符 ) 
set PATH=%PATH%;%JAVA HOME%\bin; %JAVA_HOME%ANjre\bin( 第 一 


依 
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Lenovoyset path 
windows \systen3 i siC: Windows\Systen32 When;C: windows 
owerShell\w1.8\;C:\Progran Files\Lenovo\Fingerprint Manager ProN\ 
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图 2-22 检查 系统 环境 变量 设置 


个 分 号 前 为 PATH 原 有 路 径 , 后 面 为 增加 的 路 径 ,其 中 第 二 个 路 径 对 应 JDK 内 置 JRE) 

各 环境 变量 功能 说 明 如 下 : 

JAVA-HOME 表示 Java 安装 目录 ,在 其 他 环境 变量 中 使 用 ,以 便于 其 他 相关 环境 变量 
的 设置 。 

CLASSPATH 定义 Javac 搜索 类 的 路 径 , 它 记录 Java 编译 器 和 解释 器 所 需要 的 类 所 在 
的 路 径 。 即 使 是 :用 户 自己 创建 的 类 ， 也 应 该 添加 到 CLASSPATH 中 ,这 样 比较 麻烦 ,所 以 
在 CLASSPATH 中 添加 了 一 个 当前 目录 。 这 样 , 当 转 到 用 户 所 在 的 目录 的 时 候 , 由 于 
Javac 编译 生 成 的 用 户 类 保 存在 当前 路 径 ,必须 把 当前 路 径 加 到 CLASSPATH 中 ,这 样 
Java 解释 器 才能 够 找到 用 户 的 类 。 有 时 候 , 会 看 到 CLASSPATH 中 包含 一 个 . jar 等 压缩 
的 class 文件 ,把 它 加 入 到 CLASSPATH 中 ,Java 环境 可 以 读 取 该 文件 。 

PATH 变量 是 系统 搜索 可 执行 程序 的 路 径 , 其 中 ,Java 编译 器 (javac. exe) 保 存在 % 
JAVA_HOME%\bin 中 ,Java 解释 器 (java. exe) 保 存在 %JAVA_HOME%ANjre\bin 中 ,要 
在 任何 路 径 下 使 用 javac. exe 和 java. exe, 则 必须 将 上 述 路 径 定 义 在 操作 系统 的 Path 环境 
变量 中 。 

在 CLASSPATH 和 了 PATH 环境 变量 的 配置 中 ,%...% 表 示 操 作 系 统 的 一 个 环 
境 变 量 。” , 放 于 分 阴 检 问 的 旧 当 所 信 ， 也 就 是 说 ,如 果 要 设置 多 个 查找 路 径 , 路 径 之 间 需 
要 用 分 号 分开， ts 
在 Windows 系统 中 ,要 设置 系统 环境 变量 .需要 通过 “控制 面板 "中 的 “系统 ”程序 完成 。 
或 者 ,在 桌面 wa 机” ,在 快捷 菜单 中 ,执行 “属性 ”命令 ,打开 “控制 面板 /系统 ”窗口 ， 
单 击 “ 高 级 系统 设置 "命令 ,将 直接 打开 “系统 属性 ”对 话 框 ,如 图 2-23 所 示 。 





@ jar 的 全 称 是 JavaTM Archive (JAR) file, 是 Java 归档 文件 ,主要 压缩 存储 Java 的 class 文件 。jar 是 JavaJDK 
中 的 命令 ,可 以 在 DOS 提示 符 下 使 用 jar - help 命令 显示 jar 的 使 用 方法 。 





… ”按钮 ,打开 ”环境 变量 ”对话 框 ,如 图 2-24 所 示 。 
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图 2-23 “系统 属性 ”对 话 框 图 2-24 “环境 变量 ”对 话 框 


在 “环境 变量 ”对 话 框 的 “系统 变量 "区域 ,可 以 对 环境 变量 进行 “新 建 * 编 辑 ”" 和 “删除 ” 
操作 。 

(1) 新 建 JAVA_HOME 环境 变量 

如 果 系 统 中 从 未 安装 Java 环境 ,没有 设置 JAVA_HOME 环境 变量 , 则 需要 新 建 
JAVA_HOME 环境 变量 。 在 “系统 变量 "区域 , 单 击 “ 新 建 …” 按 钮 ,打开 “新 建 系统 变量 ”对 
话 框 ,输入 要 新 建 的 系统 变量 以 及 变量 值 ,如 图 2-25 所 示 。 

输入 完成 后 , 单 击 “ 确 定 ”按钮 。 

(2) 设置 CLASSPATH 环境 变量 

如 果 系 统 环境 变量 中 没有 CLASSPATH 环境 变量 , 则 需要 新 建 CLASSPATH 环境 变 
量 。 用 上 述 同样 的 方法 ,新 建 环境 变量 CLASSPATH ,如 图 2-26 所 示 。 





朗 重 名 人 D; TAVA_HONE 
变量 值 WD- Cevwjdkl.8.0_31 


Cj] a] | 


图 2-25 新 建 系统 环境 变量 JAVA_HOME 图 2-26 新建 系统 环境 变量 CLASSPATH 


(3) 更 新 PATH 路 径 设置 

对 于 PATH 环境 变量 ,根据 其 功能 ,系统 中 通常 都 不 会 为 空 ,只 是 不 同 的 计算 机 系统 ， 
安装 的 软件 不 同 ,PATH 的 值 不 同 。 安 装 Java 后 ,需要 在 PATH 环境 变量 中 添加 如 下 路 
径 : WJAVA_HOME%\bin;%JAVA_HOMEW%\jre\bin。 具 体操 作 如 下 : 

在 “环境 变量 ”对 话 框 的 “系统 变量 "区域 (参见 图 2-24) ,选择 PATH 环境 变量 , 单 击 “ 编 
辑 ” 按 钮 ,在 原 有 PATH 基础 上 ,增加 *; WJAVA_HOME%\bin; WJAVA_HOME%\jre\ 





Web 服务 器 的 架设 和 管理 


规 四 


Web 技术 时 论 ( 艇 工 版 ) 





bin”, 其 中 ,第 一 个 分 号 是 路 径 分 隔 符 , 如 图 2-27 所 示 。 





了 Path 
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图 2-27 更 新 系统 变量 PATH 


当 上 述 环境 变量 设置 完成 后 ,需要 重新 启动 计算 机 ,让 环境 变量 生效 。 

4. 测试 Java 运行 环境 

重新 启动 计算 机 ,环境 变量 设置 生效 。 然 后 在 cmd 命令 窗口 ,依次 输入 下 述 命令 来 显 
示 环 境 变 量 的 设置 情况 : 

C:\> echo $% java home% 


Cc:\> echo % classpath% 
Ci:\> echo % path% 


也 可 以 通过 set < 环境 变量 名 > 命令 来 检验 上 述 设 置 。 如 果 设 置 正确 ,可 以 输入 下 列 命 
令 检查 Java 的 运行 是 否 正 常 。 
如 果 环 境 变 量 设置 正常 , 接 下 来 可 以 用 一 个 简单 的 Java 程序 来 测试 JDK 路 径 的 设置 
情况 JRE 路 径 的 设置 及 Java 程序 的 运行 情况 。Java 类 测试 代码 如 下 : 
public class Test 
{ 
public static void main(String args[]) { 
System. out. println("Hello, My Java program "); 
} 
} 
创建 文件 夹 D:\MyJava, 将 上 述 程序 代码 保存 在 该 文件 夹 下 .文件 名 为 Test. java( 和 类 
名 一 致 ,包括 大 小 写 )。 然 后 打开 cmd 命令 提示 符 窗口 , 转 到 Test. java 所 在 目录 D:\ 
MyJava, 然 后 输入 下 面 的 命令 : 


javac Test. java 
java Test 


如 果 显 示 “Hello,My Java program”, 表 明 Java 环境 安装 成 功 ,用 dir 命令 可 看 到 生成 


一 个 Test. class 的 文件 ,结果 如 图 2-28 所 示 。 

如 果 不 能 够 正常 编译 和 运行 , 需 查 看 环境 变量 的 设置 和 实际 的 安装 路 径 是 否 一 致 。 
2.5.5 Tomcat 的 安装 和 配置 

在 Tomcat 官方 网 站 http://tomcat. apache. org/ ,可 以 看 到 Tomcat 的 多 个 版 本 ,因为 
Tomcat 是 Java Servlet 的 容器 ,因此 Tomcat 与 JDK 的 版 本 有 关 。 在 选择 Tomcat 时 ,需要 


了 解 Tomcat 版 本 对 JDK 版 本 的 要 求 ,不 是 Tomcat 版 本 越 高 越 好 。 单 击 某 个 版 本 的 超 链 
接 , 单 击 README 超 链接 ,可 以 看 到 该 版 本 的 TOMCAT 对 JDK 版 本 的 要 求 。 
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图 2-28 Java 程序 的 编译 和 运行 


登录 Tomcat 官方 网 站 http://tomcat. apache. org/ ,在 页 面 左 侧 的 Download 区 域 , 单 
击 Which Version 超 链 接 , 显 示 各 个 版 本 的 说 明 。 根 据 上 述 安装 的 JDK 版 本 ,可 以 选择 安 
装 最 新 的 “Tomcat 9”, 单 击 相 应 的 超 链接 ,显示 Tomcat 9 下 载 界面 ,在 二 进 制 代 码 发 布 
(Binary Distributions) 区 域 ,显示 了 Tomcat 对 应 的 不 同 操作 系统 版 本 列表 ,在 列表 项 中 ,为 
了 保证 文件 的 原始 性 和 安全 性 ,每 个 项 目 后 面 都 包含 对 应 的 pgp、md5 和 shl 校 验 码 。 

单 击 32-bit/64-bit Windows Service Installer (pgp、md5, shal) 超 链接 , 即 可 下 载 
程序 ,文件 名 为 apache-tomcat-9. 0. 0. M8. exe 

1 安装 步 台 

执行 Tomcat 安装 程序 apache-tomcat-9. 0. 0. M8. exe, 启 动 Tomcat 安装 向 导 , 按 照 向 
导 提 示 执 行 下 面 步 又 : 

(1) 选择 要 安装 的 Tomcat 组 件 ,如 图 2-29 所 示 
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图 2-29 Tomcat 安 装 向 导 界 面 
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在 安装 类 型 下 拉 列 表 中 ,选择 完全 安装 (Full) ,Tomcat 将 作为 Windows 服务 器 的 服务 直 
接 启动 。 然 后 单 击 *Next 按钮 ,显示 Tomcat 服务 对 应 的 相关 端口 设置 界面 ,如 图 2-30 所 示 。 
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图 2-30 Tomcat 基本 配置 界面 


Tomcat 最 主要 的 功能 是 提供 Servlet/JSP 的 运行 环境 ,尽管 它 内置 了 一 个 简单 的 
HTTP 服务 ,也 可 以 作为 独立 的 Java Web 服务 器 ,但 在 对 静态 资源 (如 HTML 文件 或 图 像 
文件 ?的 处 理 速度 ,以 及 提供 的 Web 服务 器 管理 功能 等 方面 ,Tomcat 不 如 Windows IIS 和 
Apache 服务 器 等 专业 的 HTTP 服务 器 。 因 此 ,在 实际 应 用 中 ,常常 把 Tomcat 与 其 他 
HTTP 服务 器 集成 。 对 于 不 支持 Servlet/JSP 的 HTTP 服务 器 , HTTP 服务 器 调用 
Tomcat 服务 器 ,可 以 通过 Tomcat 服务 器 来 运行 网 页 中 的 Servlet/JSP 程序 。 

当 Tomcat 与 其 他 HTTP 服务 器 集成 时 ,Tomcat 服务 器 的 工作 模式 通常 为 进程 外 的 
Servlet 容器 ,Tomcat 服务 器 与 其 他 HTTP 服务 器 之 间 通 过 相应 的 连接 器 端口 进行 通信 。 
这 些 配置 都 是 在 Tomcat 配置 文件 中 (server. xml) 进行 设置 的 ,在 安装 过 程 中 也 可 以 设 定 ， 
常见 的 端口 有 : 

。 Server Shutdown port ,默认 端口 号 8005 .对 应 Tomcat 监听 shutdown 命令 的 端口 ， 

用 户 可 以 通过 该 端口 远程 停止 Tomcat 服务 。 

。 HTTP 端口 ,HTTP 默认 端口 号 为 8080。Tomcat 除了 作为 Servlet 的 容器 外 ,本 身 
包含 了 一 个 基本 的 HTTP 服务 ,因此 在 Tomcat 基本 配置 列表 中 ,包含 了 默认 的 
HTTP 连接 端口 设置 。 为 默认 的 Web 服务 器 配置 是 Apache 十 Tomcat, 因 此 ， 
Tomcat 的 HTTP 连接 器 默认 端口 设置 并 不 是 80 ,而 是 8080,Apache 也 正 是 通过 
8080 这 个 端口 和 Tomcat 进行 通信 的 。 因 此 .如果 服务 器 配置 了 Apache, 此 时 ,不 
要 修改 Tomcat 的 HTTP 端口 号 ,使 用 默认 的 8080。 如 果 服 务 器 不 安装 Apache, 此 
时 可 以 修改 端口 号 为 80 或 其 他 。 

。 HTTPS 端口 ,Tomcat 支持 HTTPS 协议 ,默认 HTTPS 连接 端口 号 为 8443。 通 常 

情况 下 ,在 Tomcat 配置 文件 (server. xml) 中 ,相应 的 连接 器 端口 元 素 被 注释 掉 了 ， 
HTTPS 服务 默认 为 非 启 动 状态 。 只 有 开启 HTTPS 服务 时 才 会 放 开 使 用 。 


。 AJP 端口 ,AJP(Apache JServ Protocol ,定向 包 协 议 ) 是 为 Tomcat 与 HTTP 服务 器 
之 间 通 信和 而 定制 的 协议 ,能 提供 较 高 的 通信 速度 和 效率 。Web 服务 器 通过 TCP 连 
接 和 Servlet 容器 连接 。 为 了 减少 进程 生成 socket 的 花费 , Web 服务 器 和 Servlet 
容器 之 间 尝 试 保持 持久 性 的 TCP 连接 ,对 多 个 “请 求 -回复 ”循环 重用 一 个 连接 。 一 
旦 连接 分 配给 一 个 特定 的 请 求 ,在 “请 求 -处 理 循 环 结束 之 前 不 会 再 分 配 , 从 而 提高 
通信 性 能 。AJP 连接 主要 用 于 Tomcat 与 专用 HTTP 服务 器 的 集成 ,是 Web 用 户 
访问 Web 服务 器 页 的 通信 方式 。 

根据 上 述说 明 ,设置 Tomcat 相应 的 端口 。 设 置 完 毕 后 , 单 击 * 下 一 步 ? 按 钮 ,如 果 系 统 

已 经 安装 了 公共 JRE, Tomcat 安装 向 导 会 自动 检测 到 JRE 的 安装 路 径 , 如 图 2-31 所 示 。 


Java Vitual Machine 
Java Wrtual Machine path selection. 





Please select the pa 由 of a Java SE 7.0 or later RE nstaled on your system, 





全 VavaWweL8.0.91 











图 2-31 Tomcat 检测 JVM 安装 情况 


如 果 系 统 在 安装 Java 时 ,没有 安装 公共 JRE, 此 时 需要 用 户 再 次 安装 JRE。 
(2) 选择 安装 的 物理 路 径 , 默 认 路 径 为 C:\Program Files\Apache Software Foundation\ 
Tomcat 9.0, 如 图 2-32 所 示 。 
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图 2-32 ”选择 Tomcat 安装 路 径 
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为 下 一 步 配置 环境 变量 方便 ,我 们 修改 安装 路 径 为 C:\Tomcat 9. 0。 最 后 单 击 Install 
按钮 ,开始 安装 ,向 导 将 把 有 关 的 文件 复制 到 相关 的 目录 下 ,并 自动 启动 Tomcat。Tomcat 
安装 完成 后 ,在 “开始 "菜单 的 “程序 ”组 中 ,将 增加 “Apache Tomcat 9.0” 程 序 组 。 

(5) 测试 安装 是 否 成 功 。 打 开 Web 浏览 器 ,在 地 址 栏 中 输入 “http://127. 0. 0. 1: 
8080/”( 或 “http://localhost:8080/”) ,如 果 出 现 如 图 2-33 所 示 的 界面 , 则 表明 Tomcat 安 
装 成 功 。 





€ 3 CD 127.0.018080 





Home Documentation Configuration Examples Wiki Mailing Lists 
Te 
Apache Tomcat/9.0.0.M8 “ere Software Foundation 


Wyou're seeing this, you've successfully installed Tomcat. Congratulations! 
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图 2-33 Tomcat 安装 成 功 


Tomcat 安装 完成 后 ,安装 程序 将 建立 相应 的 目录 ,所 建立 的 目录 结构 如 图 2-34 所 示 。 
Tomcat 的 核心 包括 三 个 部 分 ,分 别 是 : D Web 容器 ,内 置 的 HTTP 服务 器 ,处 理 静 态 
页 面 ; @Servlet 容器 ,处 理 Servlet, 对 应 work/Catalina( 太 平 洋 中 靠近 洛杉矶 的 一 个 小 岛 
的 名 字 ) 文 件 夹 ; @JSP 容器 ,将 JSP 页 面 编译 成 一 般 的 Servlet ,存储 在 work 子 文件 夹 下 相 
应 的 Web 应 用 文件 夹 中 。 不 同 的 Tomcat 版 本 ,安装 完成 后 的 文件 夹 结构 不 完全 相同 , 主 
要 文件 夹 及 其 功能 说 明 如 下 : 
。 bin 文件 夹 ,存放 Windows 平台 上 启动 和 关闭 Tomcat 的 脚本 。 
。 lib 文件 夹 ,存放 Tomcat 服务 器 及 所 有 Web 应 用 都 可 以 访问 的 JAR 包 。 这 些 JAR 
包 和 Tomcat 的 功能 紧密 相关 ,在 Tomcat 启动 时 会 自动 加 载 。 用 户 在 开发 Web 应 
用 系统 时 ,开发 工具 可 能 会 在 用 户 应 用 下 的 文件 夹 中 包含 一 些 JAR 包 , 有 些 JAR 包 
和 Tomcat 自 带 的 JAR 包 重 名 ,如 果 版 本 不 一 致 ,可 能 会 出 现 冲 突 而 报错 。 例如: 
Tomcat/lib 中 包含 jsp-api. jar 和 servlet-api. jar, 在 用 户 的 Web 应 用 文件 夹 , 可 能 也 
包含 上 述 JAR 包 。 
如 果 在 编译 Servlet 和 JSP 时 找 不 到 jsp-api. jar 和 servlet-api. jar, 可 以 将 其 复制 到 
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JDK 安装 目录 的 lib 子 目录 ( 即 C:\ Java\jdk jdk1. 8. 0_91\lib) 内 ,同时 ,在 CLASSPATH 
环境 变量 中 增加 这 两 个 . jar 文件 ( 即 在 原 变量 后 面 输入 *;C:\Java\jdk1. 8. 0_91\lib\jsp- 
api. jar; C:\Java\ jdk1. 8.0_91\lib\servlet-api. jar”) 。 

。 conf 文件 夹 , 存 放 Tomcat 服务 的 配置 信息 文件 ,其 中 最 重要 的 是 server. xml 和 
web. xml。server. xml 是 Tomcat 的 主 配置 文件 ,可 以 在 其 中 配置 Web 服务 的 端 
口 ,会 话 过 期 时 间 ,虚拟 目录 、 虚 拟 主 机 等 。web. xml 为 不 同 的 Tomcat 配置 的 Web 
应 用 设置 缺 省 值 。 另 外 ,在 其 /Catalina/localhost 子 目录 下 还 可 以 设置 网 站 虚拟 目 
录 和 根 路 径 信息 等 。 
logs 文件 夹 ,存放 Tomcat 执行 时 的 Log( 日 志 ) 文 件 。 
temp 文件 夹 ,存放 Tomcat 运行 的 一 些 临时 文件 。 
webapps 文件 夹 ,存放 Tomcat 服务 器 自 带 的 两 个 Web 应 用 host-manager 应 用 和 
manager 应 用 。ROOT 子 目录 下 存放 默认 首页 , 即 输入 “http://127. 0.0.1:8080/” 
后 启动 的 页 面 。 
work 文件 夹 ,存放 JAR 文件 在 运行 时 被 编译 成 的 二 进 制 文件 (Servlet)。 在 
localhost 文件 夹 下 包含 了 多 个 子 文件 夹 ,其 中 第 一 个 文件 夹 ” ?对 应 Web 服务 的 
根 ,Tomcat 执行 主 Web 应 用 的 JAR 页 面 时 生成 的 临时 文件 ,将 存储 在 “\Tomcat 
6. 0\work\Catalina\localhost\_” 文 件 夹 中 。 其 他 文件 夹 分 别 对 应 虚拟 目录 ,每 建立 
一 个 虚拟 目录 ,在 localhost 文件 夹 中 将 创建 一 个 同名 的 子 文件 夹 。 用 户 可 以 删除 
整个 localhost 子 文件 夹 ,来 删除 所 有 的 临时 文件 。 

有 时 修改 JSP 页 面 内 容 后 ,仍然 显示 修改 以 前 的 内 容 , 这 时 可 以 尝试 把 work/Catalina/ 
localhost 目录 中 所 有 内 容 删 除 , 如果 删除 时 出 现 无 法 删除 提示 ,需要 关闭 Tomcat, 然 后 青 


. 
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删除 。 再 重启 Tomcat 即 可 正确 显示 页 面 修改 后 预期 的 内 容 。 

在 早期 的 Tomcat 5.5 中 ,有 三 个 不 同 的 lib 文件 夹 ,分 别 存 储 在 /server\ /common 和 / 
shared 目录 下 ,这些 lib 文件 夹 都 可 以 放 存 JAR 文件 ,区 别 主要 在 于 : 

x /server/lib 目录 下 的 JAR 文件 只 可 被 Tomcat 服务 器 访问 。 

x /common/lib 目录 下 的 JAR 文件 可 以 被 Tomcat 服务 器 和 所 有 Web 应 用 访问 。 

x /shared/lib 目录 下 的 JAR 文件 可 被 所 有 Web 应 用 访问 ,而 不 能 被 Tomcat 服务 器 
访问 。 

在 用 户 自己 的 站 点 中 ,WEB-INF 目录 下 也 可 以 建 lib 子 目录 ,在 lib 子 目录 下 也 可 以 放 
各 种 JAR 包 , 但 这 些 JAR 包 只 能 被 当前 Web 应 用 访问 。 

理解 了 Tomcat 各 文件 夹 的 功能 后 ,根据 上 述 目录 结构 , 接 下 来 即 可 进行 Tomcat 的 配 
置 , 分 成 4 个 方面 : 设置 Tomcat 环境 变量 ,配置 Tomcat 服务 端口 ,设置 Tomcat 服务 根 目 
录 , 建 立 虚 拟 目 录 。 

2. 配置 Tomcat 环境 变量 

Tomcat 为 Servlet/JSP 容器 ,Tomcat 要 运行 Java 程序 ,需要 有 Java 运行 环境 的 支持 ， 
同时 需要 一 些 特殊 的 环境 设置 ,包括 以 下 4 个 系统 环境 变量 ,具体 内 容 应 根据 安装 路 径 
设置 ， 

(1) 添加 Tomcat 主 目录 环境 变量 

TOMCAT HOME = C: NTomcat 9.0 

(2) 添加 CATALINA_HOME 环境 变量 

CATALINA HOME= C:NTomcat 9.0 


(3) 更 新 CLASSPATH 环境 变量 


CLASSPATH = .; % JAVA HOME %\l1ib; % TOMCAT HOME % \lib 


分 号 ;为 路 径 的 分 隔 符 “. ”代表 当前 路 径 。 
如 果 已 经 配置 了 Java 环境 变量 ,只 需要 增加 ;%TOMCAT_HOME%ANlib 路 径 。 
(4) 更 新 PATH 环境 变量 


PATH= % PATHS% ; %'TOMCAT HOME% ; % TOMCAT HOME % \bin 


上 述 环境 变量 的 配置 和 Java 环境 变量 的 配置 方法 相同 。 设置 完 成 后 ,重新 启动 计算 
机 ,使 设置 生效 ,然后 再 启动 Tomcat。 

需要 特别 注意 的 是 ,如 果 该 步骤 的 环境 变量 配置 不 对 或 者 server. xml 文件 配置 不 对 
( 见 下 面 的 介绍 ),Tomcat 将 无 法 启动 。 另 外 ,如 果 Web 应 用 中 只 是 一 般 的 htm 文件 ,不 配 
置 环境 变量 ,网 站 也 可 以 浏览 ,因此 ,Tomcat 启动 后 ,并 不 意味 着 所 有 的 需要 运行 用 户 Web 
的 设置 都 完成 或 正确 。 

在 实际 应 用 中 ,一 般 需 要 更 改 三 个 基本 配置 : 修改 服务 端口 、 修 改 网 站 的 根 路 径 和 建立 
虚拟 目录 ,这 些 配置 都 是 通过 Tomcat 主 配置 文件 conf/server. xml 完成 的 。 

3. 修改 服务 端口 

在 Tomcat 的 安装 过 程 中 ,可 以 设置 Tomcat 服务 端口 ,默认 值 为 8080。 安 装 完 成 后 ， 
如 果 需 要 修改 服务 端口 ,可 通过 Tomcat 主 目录 下 conf 目录 中 的 server. xml 文件 完成 。 不 


同 的 Tomcat 版 本 , 主 配置 文件 Server. xml 的 内 容 不 同 。 


对 于 Tomcat 9, 利 用 Windows“ 记 事 本 ”程序 或 其 他 文本 编辑 器 打开 \Tomcat 9. 0\conf\ 目 
录 下 的 server. xml 文件 ,定位 元 素 <Connector port 二 "8080">, 可 以 看 到 Tomcat 服务 的 设 
置 端口 为 8080, 如 图 2-35 所 示 。 





<Connector port*"8980™ protocol="HTTP/1,1” 
connectionTimeout="28096” 
redirectPort="8443" /> 





图 2-35 ” Tomcat 的 服务 端口 信息 


修改 Web 服务 端口 为 HTTP 的 默认 端口 80。 注 意 , 如 果 是 在 Windows 平台 中 ,并 且 
安装 了 IIS, 则 修改 的 端口 号 不 要 和 IIS 中 的 Web 服务 端口 冲突 。 修 改 完 毕 后 ,保存 该 文 
件 ,然后 重启 Tomcat 服务 器 ,这 样 Tomcat 就 在 新 的 端口 提供 服务 了 。 

4. 修改 网 站 根 路 径 

不 同 的 Tomcat 版 本 ,设置 Web 应 用 根 的 方法 也 不 相同 。 在 Tomcat 9 中 ,设置 
Tomceat 根 的 方法 非常 简单 ,只 需要 修改 Tomcat 主 配置 文件 conf/server. xml 即 可 。 

用 Windows" 记 事 本 "程序 或 其 他 文本 编辑 器 打开 Tomcat 主 配置 文件 server. xml, 定 
位 到 文档 尾部 的 < Host > 元 素 





加 一 个 上 下 文 元 素 (< Context >) ,来 设置 Tomcat 的 根 。 
例如 ,如 果 将 d:\GSL3.0 设置 为 Tomcat 的 根 , 设 置 如 图 2-36 所 示 。 


lassN 
1 


《Context path="™ di 





图 2-36 设置 Tomcat 服务 的 根 


需要 特别 注意 的 是 ,Tomcat 区 分 大 小 写 ,< Context > 元 素 的 第 一 个 字母 一 定 为 大 写 , 且 
文件 夹 名 称 大 小 写 必 须 和 实际 一 致 。 修 改 完毕 后 ,在 任务 栏 上 停止 Tomcat ,再 重新 启动 , 打 
开 浏览 器 ,将 运行 根 中 的 index. jsp 程序 页 面 。 

如 果 还 要 建立 虚拟 目录 ,只 需要 再 增加 不 同 的 < Context > 元 素 即 可 ,详细 介绍 见 2.5.7 
节 的 内 容 。 在 server. xml 中 ,可 以 设置 多 个 不 同 的 虚拟 目录 。 
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5. 设置 Web 应 用 首页 

在 Windows IS 中 ,我 们 可 以 设置 一 个 Web 站 点 的 首页 ( 即 登录 一 个 站 点 ,在 不 指定 下 
载 文件 时 默认 的 下 载 文档 ,一 般 是 存储 在 站 点 主 目录 下 的 index 文件 )。 在 Tomcat 中 ,如 何 
设置 站 点 首页 呢 ? 

在 Tomcat 中 ,站 点 首页 是 通过 web. xml 文件 完成 的 , web. xml 文件 又 称 为 站 点 配置 
文件 。 在 每 一 个 Web 应 用 中 ,往往 在 主 目录 下 包含 一 个 WEB-INF 子 目 录 , 其 中 存储 了 该 
站 点 的 配置 文件 web. xml。 此 外 ,在 Tomcat 的 conf 文件 夹 下 也 包含 一 个 web. xml 文件 ， 
内 容 如 图 2-37 所 示 。 





图 2-37 Web. xml 文件 


Tomcat 的 conf/web. xml 文件 是 对 所 有 Web 应 用 的 一 个 公共 配置 。 对 于 一 个 具体 的 
Web 应 用 ,如 果 包 含 自己 的 WEB-INF/web. xml 文件 , 当 两 个 配置 冲突 时 , 则 自己 的 web. 
xml 配置 将 覆盖 conf/web. xml 中 的 设置 。 一般 情 况 下 ,只 需要 修改 conf/web. xml 配置 文 
件 即 可 ,不 需要 单独 设置 每 一 个 应 用 的 WEB-INF/web. xml 文件 。 


2.5.6 建立 并 部 署 Web 应 用 


在 默认 情况 下 ,Tomcat 指向 一 个 默认 的 Web 应 用 (\Tomcat 9\webapps\ROOT), 在 
webapps 文件 夹 下 ,还 包含 其 他 几 个 Web 应 用 ,如 jsp-examples、servlets-examples 等 。 

下 面 介绍 在 Tomcat 下 新 建 用 户 Web 应 用 的 方法 和 步骤 。 

1. 规划 Web 应 用 目录 结构 

对 于 一 个 Web 应 用 ,包含 了 大 量 的 网 页 文件 ,为 了 更 好 地 管理 和 维护 ,应 该 按照 一 定 的 
规则 组 织 文 件 。 常 用 的 方法 是 按照 Web 站 点 用 户 角色 和 功能 建立 文件 夹 ,每 个 用 户 角色 或 
功能 模块 对 应 一 个 文件 夹 ,分 别 存储 相应 的 页 面 文件 。 图 2-38 是 我 们 根据 一 个 常用 的 Web 
应 用 规划 的 文件 夹 结 构 。 

将 每 一 类 功能 相关 的 页 面 、 图 片 组 织 到 一 个 文件 夹 中 ,例如 mybbs、myblogs、myonline 
等 ,在 这 些 文件 夹 中 ,还 可 以 定义 子 文件 夹 ,例如 定义 images 文件 夹 .存储 所 用 到 的 图 片 。 
在 站 点 主 目录 下 ,通常 还 可 以 定义 database 文件 夹 ,存储 站 点 数据 库 文 件 。 定 义 pubcss 文 
件 夹 ,存储 用 户 定义 的 样式 表 。 

当然 ,还 有 一 个 WEB-INF 文件 夹 ,存储 Web 应 用 的 配置 文件 web. xml 以 及 定义 
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图 2-38 Web 应 用 目录 结构 示例 


classes 和 lib 两 个 子 文件 夹 ,存储 Web 中 用 户 定 义 的 类 。 用 户 定义 的 大 量 的 JavaBean 都 是 
存储 在 WEB-INF/classes 文件 夹 中 的 ,里 面 通 常 还 定义 不 同 的 包 , 即 子 文件 夹 。 

在 站 点 主 目 录 中 ,包含 了 Web 应 用 的 首页 文件 index. jsp ,也 可 以 包含 一 些 其 他 的 常用 
文件 ,这 些 文件 通常 是 公用 的 ,不 便于 保存 到 一 个 具体 的 功能 文件 夹 中 。 

2. WEB-INF 目录 

在 Tomcat 中 ,每 一 个 Web 应 用 主 目录 下 往往 都 包含 一 个 WEB-INF 目录 ,用 于 放置 一 
些 配 置 文件 与 不 希望 外 部 程序 访问 的 私有 文件 ,在 网 络 上 是 不 允许 访问 该 文件 夹 的 。 在 
WEB-INF 目录 下 有 一 个 Web 应 用 部 署 文件 web. xml, 对 当前 应 用 程序 进行 相关 设置 ,如 
设置 Web 应 用 的 默认 首页 文件 ,这 些 设置 只 对 该 Web 应 用 本 身 有 用 ,不 影响 其 他 Web 
应 用 。 

在 WEB-INF 目录 下 还 可 以 建 classes 和 lib 子 目 录 。classes 目录 用 于 放置 Web 应 用 
程序 所 需 调 用 的 类 ,如 JavaBean。 在 运行 过 程 中 ,Tomcat 类 装载 器 先 装载 classes 目录 下 的 
类 ,再 装载 lib 目录 下 的 类 。 如 果 两 个 目录 下 存在 同名 的 类 ,classes 目录 下 的 类 具有 优先 
权 。lib 目录 主要 是 放置 需要 引入 的 JAR 文件 ,应 用 程序 导入 的 包 先 从 这 里 开始 寻找 ,然后 
再 到 容器 的 全 局 路 径 下 TOMCAT_HOME/lib 下 寻找 。 

3。. Web 应 用 配置 文件 web. xml 

对 Web 应 用 的 配置 是 通过 Web 应 用 配置 文件 web. xml 实现 的 ,类 似 于 Windows IIS 
中 的 站 点 属性 对 话 框 的 配置 。 在 Tomcat/conf 下 包含 一 个 Web 应 用 配置 文件 web. xml, 它 
是 所 有 Web 应 用 的 公共 配置 文件 。 此 外 ,在 每 一 个 Web 应 用 中 ,在 主 目录 下 的 WEB-INF 
子 目 录 中 ,都 包含 一 个 web. xml 文件 , 它 是 该 Web 应 用 的 部 署 文 件 。 当 两 个 配置 中 的 项 目 
冲突 时 , 则 自己 的 web. xml 配置 将 覆盖 conf/web. xml 中 的 设置 。 
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在 web. xml 配置 文件 中 , 根 元 素 是 < web-app >, 其 中 定义 了 站 点 的 各 种 配置 ,具体 的 元 
素 可 参考 主 配置 文件 \config\web. xml, 主要 包括 以 下 几 个 方面 : 

(1) 网 站 名 称 和 说 明 , 包 括 三 个 xml 元 素 , 分 别 是 : < description >、< display-name > 和 
<icon>, 用 于 设置 站 点 的 描述 .显示 名 称 和 图 标 。 例 如 ,Tomcat 自 带 的 manger 应 用 的 
web. xml 中 的 站 点 说 明 xml 元 素 内 容 如 下 : 

<display- name > Tomcat Manager Application </display- name> 

<description> 

A scriptable management web application for the Tomcat Web Server; 


Manager lets you view, load/unload/etc particular web applications. 
</description> 


(2) Servlet 名 称 和 映射 ,一 个 Web 应 用 通常 包含 多 个 servlet 元 素 , 每 个 servlet 包含 
两 个 子 元 素 servlet-name 和 url-pattern, 用 来 定义 servlet 所 对 应 的 URL, 常 见 内 容 如 下 : 


<servlet> 
< servlet - name > Manager </servlet - name > 
< servlet - class > org. apache. catal ina. manager. ManagerServlet </servlet - class> 
<init- param> 
< param - name > debug </param - name > 
<param- value > 2 </param - value> 
</init - param> 
</servlet > 


在 servlet 元 素 定义 后 ,定义 一 组 servlet-mappin 元 素 ,一 般 形式 如 下 : 


<servlet - mapping> 
< servlet - name > Manager </servlet - name > 
<url - pattern >/text/ * </url - pattern > 
</servlet - mapping > 


(3) Session 的 设 定 ,session-config 包含 一 个 子 元 素 session-timeout, 用 于 定义 web 站 
点 中 的 session 参数 。 例 如 , 设 定 会 话 时 间 为 20 分 钟 , 对 应 的 xml 元 素 内 容 为 ， 

<session- config > 

< session- timeout > 20 </session - timeout > 

</session- config> 

可 以 在 一 个 Web 应 用 中 设 定 具体 的 超时 时 间 ,如 果 为 0, 则 自动 销毁 session, 即 只 有 用 
户 关 闭 Web 应 用 时 才 销 毁 session。 

(4) mime 映射 ,mime-mapping 包含 两 个 子 元 素 extension 和 mime-type 定义 某 一 个 扩 
展 名 和 某 一 MIME Type 映射 0。 例 如 : 要 在 Tomcat 中 打开 excel 文件 ,需要 在 web. xml 
中 做 如 下 设置 : 


<mime — mapping > 
< extension > xls </extension> 


@ MIME(Multipurpose Internet Mail Extensions) 多 用 途 互 联网 邮件 扩展 类 型 ,是 设 定 某 种 扩展 名 的 文件 用 一 种 
应 用 程序 来 打开 的 方式 类 型 , 当 该 扩展 名 文件 被 访问 的 时 候 , 浏 览 器 会 自动 使 用 指定 应 用 程序 来 打开 ,多 用 于 指定 一 些 
客户 端 自 定义 的 文件 名 ,以 及 一 些 媒体 文件 打开 方式 。 


<mime - type> application/vnd. ms - excel </mime - type > 
</mime — mapping > 
<mime — mapping > 

< extension> csv </extension> 

<mime— type> application/vnd. ms — excel </mime — type > 
</mime — mapping > 


(5) 错误 处 理 ,error-page 元 素 包 含 三 个 子 元 素 error-code .exception-type 和 location， 
将 错误 代码 (Error Code) 或 异常 (Exception) 的 种 类 对 应 到 Web 站 点 的 相应 页 面 。 例 如 : 
<error- page> 
<error- code> 404 </error - code> 


< location >/error404. jsp </location> 
</error - page> 


(6) 默认 首页 设置 ,对 应 的 元 素 声明 一 般 形 式 为 : 


<welcome -file- list> 
<welcome - file> index. html </welcome - file> 
<welcome - file> index. htm </welcome - file> 
<welcome - file> index. jsp </welcome - file> 
</welcome - file- list> 


一 般 情况 下 ,只 需要 配置 Tomcat 的 公共 配置 文件 conf/web. xml 即 可 ,不 需要 为 每 一 
个 Web 应 用 配置 其 WEB-INF/web. xml 文件 。 

4. 修改 Tomacat 配置 

在 测试 我 们 的 Web 应 用 以 前 ,需要 对 Tomcat 做 相应 的 设置 ,使 得 Tomcat 指向 用 户 的 
Web 应 用 (例如 D:\MyJSP) ,修改 如 下 : 

(1) 修改 Tomcat 主 配置 文件 \Tomcat 9.0\conf\server. xml, 设 置 Web 服务 的 端口 号 
为 80, 同 时 ,修改 默认 Tomcat 服务 的 根 , 在 server. xml 的 尾部 ,添加 下 列 元 素 : 


<Context path= "" docBase= "D:\MyJSP" /> 


(2) 设置 站 点 首页 ,可 以 修改 Tomcat 配置 文件 \Tomcat 9.0\conf\web. xml ,设置 Web 
应 用 的 一 些 常 用 配置 ,默认 首页 为 index. jsp, 无 须 修改 。 

需要 注意 的 是 ,如 果 已 经 启动 了 Apache server, 首 先 应 该 在 Windows 的 “开始 ”菜单 
中 ,在 程序 组 中 找到 Apache HTTP Server 程序 组 ,执行 Stop 命令 ,停止 Apache Server。 

5. 测试 新 的 Web 应 用 

当 上 述 修改 完毕 后 ,在 任务 栏 中 右 击 Tomcat 图 标 因 ,选择 Shutdown:Tomcat 命令 , 关 
闭 Tomcat。 然 后 在 “开始 ”菜单 中 重新 启动 Tomcat, 尝 试 运 行 用户 Web 应 用 。 

在 站 点 根 下 ,建立 一 个 简单 的 站 点 首页 测试 文件 index. jsp ,代码 如 下 : 

<%@ page contentType = "text/html;charset = gb2312" % > 

<html> 

<head> 

<title> Hello,JSP </title> 

</head > 

<body > 

<p align = "center"><% out. println(" 你 好 ，JSP...!"); %></p> 





规 凡 四 
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<% 
String datestr =""; 
java.util.Date now = new java.util.Date(); 
java. text. DateFormat df = new java. text.SimpleDateFormat("yyyy— MM— dd HH:mm") ; 
datestr = df.format(now) ; 
> 
现在 的 时 间 是 : <% = datestr %> 
</body > 
</html > 


打开 Web 浏览 器 ,输入 “http://127. 0.0. 1:8080/”, 显 示 如 图 2-39 所 示 。 


i 3 EE | 


-3 © D127.0.0.1:8080 
你 好 ，JSP...! 
现在 的 时 间 是 ，2016-07-25 17:06 





图 2-39 第 一 个 JSP Web 应 用 测试 首页 


表明 Tomcat 已 经 运行 了 用 户 的 Web 应 用 D:\MyJSP 目录 下 的 首页 文件 index. jsp。 
用 户 可 以 在 主 目录 下 创建 其 他 的 JSP 文件 ,在 浏览 器 地 址 栏 内 输入 : http://127. 0.0.1: 
8080/ 文 件 名 (包含 扩展 名 ) 即 可 执行 相应 的 JSP 文件 了 。 

如 果 JSP 文件 中 含有 Java 脚本 程序 ,必须 要 保证 Tomcat 和 J2SDK 的 环境 变量 设置 正 
确 , 和 否则 Web 应 用 将 不 能 运行 。 如 果 Web 页 是 . htm 文件 ,运行 与 环境 变量 的 配置 无 关 。 

在 应 用 中 ,如 果 遇 到 不 能 打开 Web 应 用 首页 文件 index. jsp ,应 检查 该 Web 应 用 主 目 
录 下 的 WEB-INF\web. xml 配置 文件 ,同时 检查 Tomcat 下 的 公共 配置 文件 conf\ web. 
xml ,确认 两 者 是 否 配置 一 致 。 如 果 修 改 了 某 个 JSP 页 面 ,但 重新 运行 仍 显示 原先 内 容 , 此 
时 需要 删除 Tomcat\work\Catlinia\localhost 中 的 所 有 临时 文件 ,也 可 以 直接 删除 localhost 
子 文件 夹 。 


2.5.7 HTTP 服务 器 与 Tomcat 的 集成 


通过 上 面 的 介绍 ,我们 知道 Tomcat 最 主要 的 功能 是 提供 Servlet/JSP 容器 ,尽管 它 也 
可 以 作为 独立 的 Java Web 服务 器 , 它 在 对 静态 资源 (如 HTML 文件 或 图 像 文件 ) 的 处 理 速 
度 , 以 及 提供 的 Web 服务 器 管理 功能 方面 都 不 如 其 他 专业 的 HITP 服务 器 ,如 IS 和 
Apache HTTP Server。 因 此 在 实际 应 用 中 ,为 了 提高 Web 系统 的 整体 性 能 ,常常 把 
Tomcat 与 其 他 HTTP 服务 器 集成 。 对 于 不 支持 Servlet/JSP 的 HTTP 服务 器 ,可 以 通过 
Tomcat 服务 器 来 运行 Servlet/JSP 组 件 。 


1. Tomcat 与 HTTP 服务 器 集成 的 原理 
当 Tomcat 与 其 他 HTTP 服务 器 集成 时 ,Tomcat 服务 器 的 工作 模式 通常 为 进程 外 的 
Servlet 容器 ,Tomcat 服务 器 与 其 他 HTTP 服务 器 之 间 通 过 专门 的 插件 来 通信 。Tomcat 
服务 器 通过 Connector 连接 器 组 件 与 客户 程序 建立 连接 .Connector 组 件 负 责 接 收 客户 的 请 
求 ,以 及 把 Tomcat 服务 器 的 响应 结果 发 送 给 客户 。 
默认 情况 下 ,Tomcat 在 server. xml 中 配置 了 两 种 连接 器 : 
<! -- Define a non- SSL Coyote HTTP/1. 1 Connector on port 8080 -一 > 
<Connector port = "8080" maxThreads = "150" minSpareThreads = "25" 
maxSpareThreads = "75" enableLookups = "false" 
redirectPort = "8443" 
acceptCount = "100" 
debug = "0" 
connectionTimeout = "20000" 
disableUploadTimeout = "true" /> 
<! -— Define an AJP 1.3 Connector on port 8009 -一 > 
< Connector port = "8009" protocol = "AJP/1.3" redirectPort = "8443" /> 


第 一 个 连接 器 监听 8080 端口 ,负责 建立 HTTP 连接 。 在 通过 浏览 器 访问 Tomcat 服 
务 器 的 Web 应 用 时 ,使 用 的 就 是 这 个 连接 器 。 第 二 个 连接 器 监听 8009 端口 ,负责 和 其 他 的 
HTTP 服务 器 建立 连接 。 在 把 Tomcat 与 其 他 HTTP 服务 器 集成 时 ,就 需要 用 到 这 个 连 
接 器 。 

Web 客户 访问 Tomcat 服务 器 上 JSP 组 件 有 两 种 基本 方式 ,如 图 2-40 所 示 。 
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图 2-40 Web 客户 访问 Tomcat 服务 器 JSP 组 件 的 方式 


在 Web 应 用 中 , Web 客户 访问 Tomcat 的 方式 有 两 种 ,第 一 种 方式 是 客户 直接 访问 
Tomcat 服务 器 上 的 JSP 组 件 , 访 问 的 URL 为 http://localhost:8080/index.jsp。 第 二 种 访 
问 方式 是 通过 HTTP 服务 器 访问 Tomcat 服务 器 上 的 JSP 组 件 。Apache 负责 解析 任何 静 
态 Web 内 容 , 任 何不 能 解析 的 内 容 , 用 表达 式 告诉 JK 插件 ,JK 插件 将 派发 给 相关 的 
Tomcat 应 用 服务 器 去 解释 。 

下 面 介绍 Tomcat 和 HTTP 之 间 的 通信 过 程 。 

(1) JK 插件 


第 
作 
Tomcat 提供 了 专门 的 JK 插件 来 负责 Tomcat 和 HTTP 服务 器 的 通信 ,JK 插件 安置 章 
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在 HTTP 服务 器 上 。 当 HTTP 服务 器 接收 到 客户 请 求 时 , 它 会 通过 JK 插件 来 过 滤 URL， 
JK 插件 根据 预先 配置 好 的 URL 映射 信息 ,决定 是 否 要 把 客户 请 求 转发 给 Tomcat 服务 器 
处 理 。 

如 果 在 预先 配置 好 的 URL 映射 信息 中 ,所 有 “/ * .jsp” 形 式 的 URL 都 由 Tomcat 服务 
器 来 处 理 ,那么 在 图 2-40 所 示 的 情况 中 ,JK 插件 将 把 客户 请 求 转发 给 Tomcat 服务 器 ， 
Tomcat 服务 器 于 是 运行 index. jsp, 然 后 把 响应 结果 传 给 HTTP 服务 器 ,HTTP 服务 器 再 
把 响应 结果 传 给 Web 客户 端 。 对 于 不 同 的 HTTP 服务 器 ,Tomcat 提供 了 不 同 的 JK 插件 
的 实现 模块 ,包括 Apache HTTP 服务 器 集成 模块 (Windows 版 )mod_jk_2. 0. 46. dll， 
Apache HTTP 服务 器 集成 模块 (Linux RedHet 版 )mod_jk. so-ap2. 0. 46-rh72.. 46-rh72， 
IIS 服务 器 集成 模块 isapi_redirect. dll。 

(2) AJP 协议 

AJP 是 为 Tomcat 与 HTTP 服务 器 之 间 通 信 而 定制 的 协议 ,能 提供 较 高 的 通信 速度 和 
效率 。 在 配置 Tomcat 与 HTTP 服务 器 集成 中 ,用 户 可 以 不 必 关 心 AJP 协议 的 细节 。 

2. 在 Windows 下 Tomcat 与 Apache 服务 器 集成 

在 本 章 的 2. 5. 2 小 节 , 我 们 已 经 安装 并 配置 了 Apache 服务 器 ,端口 号 设置 为 8001 ,并 
创建 了 一 个 用 户 测试 网 站 D:/bluesky 中 ,站 点 首页 文件 为 一 个 静态 页 面 index. htm。 下 面 
我 们 将 上 述 的 测试 首页 文件 index. jsp 保存 到 D:/bluesky 站 点 ,并 删除 原先 的 index. htm。 
修改 Apache 主 配置 文件 httpd. conf ,设置 Apache 服务 器 的 首页 为 index. jsp。 操 作 如 下 : 

用 Windows“* 记 事 本 ”程序 或 其 他 文本 编辑 器 打开 Apache 主 配置 文件 conf/httpd. 
conf, 找 到 首页 配置 指令 段 : 


# 
# DirectoryIndex: sets the file that Apache will serve if a directory is requested. 


# 
<IfModule dir module> 

DirectoryIndex index. html index.jsp 
</IfModule > 


将 默认 的 index. html 改 为 index. jsp。 

运行 bin/ ApacheMonitor. exe 程序 ,重新 启动 Apache, 打 开 浏 览 器 ,在 地 址 栏 输入 
http://127. 00.1:8001/ ,页面 中 没有 显示 当前 时 间 , 可 见 , 服 务 器 页 中 的 脚本 程序 未 执行 。 

然后 ,在 浏览 器 地 址 栏 输入 http://127. 0. 0.1:8080/, 则 能 够 正确 显示 页 面 ,可 见 ， 
Tomcat 能 够 提供 Web 服务 ,同时 ,Tomcat 执行 了 服务 器 页 中 的 脚本 程序 。 

根据 Apache 和 Tomacat 的 功能 定位 ,要 保证 Apache 在 遇 到 JSP 服务 器 页 时 应 该 实时 
调用 Tomcat 执行 服务 器 页 面 中 的 脚本 程序 ,需要 进行 Apache 和 Tomcat 的 集成 。 根 据 
图 2-40 所 示 的 Tomcat 和 HTTP 服务 器 的 关系 ,Apache 和 Tomcat 的 集成 可 以 有 以 下 三 
种 方法 : 

(1) 利用 Apache 自 带 的 代理 模块 mod_proxy 使 用 代理 技术 来 连接 Tomcat。http_ 
proxy 模式 是 基于 HTTP 协议 的 代理 ,因此 它 要 求 Tomcat 必须 提供 HTTP 服务 ,也 就 是 
说 必须 启用 Tomcat 的 HTTP Connector。 

打开 Apache 配置 文件 conf/httpd. conf 文件 ,分别 找到 如 下 指令 代码 : 

















# LoadModule proxy module modules/mod proxy. so 

#LoadModule proxy http module modules/mod proxy http.so 

将 注释 去 掉 , 即 可 载 人 proxy_module 模块 和 proxy_http_module 模块 。 

然后 ,设置 Apache 服务 的 正 向 和 反 向 代理 为 Tomcat 应 用 服务 器 ,在 Apache 的 httpd. 
conf 文件 中 ,在 #LoadModule 指令 列表 的 后 面 ,增加 如 下 指令 : 

ProxyPass / http://localhost:8080/ 

ProxyPassReverse / http://localhost:8080/ 

其 中 ,ProxyPass 指令 是 mod_proxy 模块 的 一 部 分 ,其 功能 是 将 一 个 远 端 服 务 器 映射 到 
本 地 服务 器 的 URL 空间 中 ,此 时 本 地 服务 器 并 不 充当 代理 角色 ,而 是 充当 远程 服务 器 的 一 
个 镜像 。 指 令 的 一 般 形 式 是 : ProxyPass [path] !| url [key 二 value key 二 value ...]], 其 中 ， 
path 是 一 个 本 地 虚拟 路 径 名 ,url 是 一 个 指向 远程 服务 器 的 部 分 URL ,并且 不 允许 包含 查询 
字符 串 。 

例如 ,假设 本 地 服务 器 地 址 是 http://abc. com/ ,配置 代理 指令 如 下 : 


ProxyPass /aaa/ http://xyz. com/ 


则 本 地 请 求 http://abc. com/aaa/bar 的 本 地 请 求 将 会 在 内 部 转换 为 一 个 代理 请 求 : 
http://xyz. com/ bar。 

“1” 指 令 用 于 阻止 对 某 个 子 目 录 的 代理 。 例 如 : 

ProxyPass /aaa/al ! 

ProxyPass /aaa http://xyz. com 

将 会 代理 除 /aaa/al 之 外 的 所 有 对 abc. com 下 /aaa 的 请 求 。 

重启 Apache, 在 浏览 器 地 址 栏 输入 http://127.0.0.1:8001/ 显 示 测试 首页 文件 index. 
jsp 内 容 , 与 访问 网 址 http://127. 0.0.1:8080/ 一 样 ,表明 Apache 调用 了 Tomcat 服务 。 

(2) ajp_proxy 连接 方式 。 跟 http_proxy 方式 一 样 ,都 是 由 代理 模块 mod_proxy 所 提 
供 的 功能 。 配 置 也 是 一 样 ,只 需要 把 http:// 换 成 aip://, 同 时 连接 的 是 Tomcat 的 AJP 
Connector 所 在 的 端口 。 配 置 如 下 : 

在 Apache 中 修改 httpd. conf 文件 ,分 别 找到 如 下 指令 代码 : 

#LoadModule proxy_module modules/mod_proxy. so 

#LoadModule proxy ajp_module modules/mod proxy ajp. so 

将 注释 去 掉 , 启 用 proxy_module 和 proxy_ajp_module 

在 Apache 的 httpd. conf 文件 中 增加 以 下 几 行 指令 代码 : 

# 禁止 使 用 proxy_ajp 代理 的 目录 

ProxyPass /目录 / ! 

# 使 用 proxy_ajp 代理 

ProxyPass / ajp://127.0.0.1:8009/ 

ProxyPassReverse / ajp://127.0.0.1:8009/ 

上 述 命令 配置 把 所 有 目录 全 用 代理 (当然 ,还 会 跟 上 面 的 禁用 配置 组 合成 完整 的 规则 )。 
最 后 重启 Apache, 当 访问 Apache 时 ,Apache 将 调用 Tomcat 服务 为 用 户 提 供 JSP 解析 。 

上 述 两 种 方法 通过 ProxyPass 命令 为 Apache 设置 代理 ,虽然 可 以 调用 Tomcat, 实 现 和 
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Apache 和 Tomcat 的 集成 ,但 缺点 是 所 有 对 Apache 的 页 面 请 求 都 将 发 送 到 其 代理 服务 器 
Tomcat 服务 器 ,这 并 不 理想 ,没有 有 效 地 改善 整体 性 能 。 

(3) 通过 JK 模块 整合 。 通 过 JK 模块 整合 Apache 和 Tomcat, 需 要 将 相应 的 JK 链接 
器 模块 (如 mod_jk-xxx. so, xxx 与 版 本 相关 ) 下 载 并 复制 到 Apache/modules 文件 夹 中 ,并 
修改 Apache 配置 文件 httpd. conf, 在 文件 中 增加 下 列 指令 : 

LoadModule jk module modules/mod jk- xxx. so 

JKWorkersFile conf/workers. properties 

# 将 * .action 和 x .jsp 类 型 的 请 求 分 配给 Tomcat 

井 JkMount 后 面 的 workerl 对 应 worker. properties 文件 中 worker. list 里 的 worker 的 名 称 

JkMount / x* .action workerl 

JkMount / * . jsp workerl 


其 中 ,第 一 条 指令 加 载 IK 链接 器 插件 ,用 于 连接 Tomcat。 第 二 条 指令 用 于 设置 连接 
时 的 配置 参数 ,文件 保存 在 Apache 安装 目录 的 /conf 目录 下 ,文件 名 workers. properties， 
该 文件 为 转发 模块 指令 工作 单 文件 ,用 来 定义 转发 主机 和 监听 端口 等 内 容 , 一 般 形式 如 下 : 


# 为 mod_ 这 模块 指明 Tomcat 的 安装 路 径 
workers.tomcat_home = C:/Tomcat 9.0 

# 为 mod_ 冰 模块 指明 JDK 的 安装 路 径 

workers. java_ home = C:/Java/ jdk1.8.0 91 

# 添加 一 个 workerl 到 worker. list 列表 ,可 设置 多 个 worker 到 worker. list 

worker. list = workerl 

# Workl 为 应 用 服务 器 Tomcat, 设置 workerl 参数 

# Tomcat 所 在 机 器 ,如 果 安 装 在 与 Apache 不 同 的 机 器 则 需要 设置 下 

worker. worker1. host = localhost 

# 工作 端口 : Tomcat 中 设 定 的 默认 Connector 监听 端口 

worker. worker1.port = 8080 

井 worker 的 类 型 , 允许 的 值 为 ajpl3,、ajpl4、lb、status 等 ; ajpl3 是 mod_jk 连接 WebServer 和 
Tomcat 的 首选 方式 (即使 用 Socket 作为 通信 渠道 ) 

worker. workerl.type= ajpl3 

# 负载 平衡 因子 


worker. worker1. lbfactor = 1 

在 实际 应 用 中 ,如果 网 站 的 访问 量 非常 大 ,为 了 提高 访问 速度 ,可 以 将 多 个 Tomcat 服 
务 器 与 Apache 集成 ,让 它们 共同 分 担 运行 Servlet/JSP 组 件 的 任务 。JK 插件 的 
loadbalancer( 负 载 平衡 器 ) 负 责 根 据 在 workers. properties 文件 中 预先 配置 的 lbfactor( 负 
载 平衡 因数 ) 为 这 些 Tomcat 服务 器 分 配 工作 负荷 ,实现 负载 平衡 。 

相对 于 上 面 的 方法 (1) 和 方法 (2) ,该 方法 配置 麻烦 ,但 效率 较 高 ,详细 介绍 略 。 

采用 上 述 任何 一 种 方法 ,配置 完成 后 ,在 浏览 器 地 址 栏 输入 http://127. 0. 0. 1: 8001/， 
显示 结果 页 面 和 http://127. 0. 0. 1: 8080/ 相 同 , 则 表明 整合 成 功 ,此 时 Apache 调用 了 
Tomcat, 执 行 服务 器 页 面 中 的 JSP 服务 器 脚本 程序 。 


2.6 虚拟 主机 与 虚拟 目录 


在 实际 应 用 中 ,在 一 台 物 理 计算 机 中 ,可 以 创建 并 运行 多 个 网 站 ,这 就 是 虚拟 主机 的 概 
念 。 我 们 在 Windows Server /IIS 中 已 经 看 到 了 多 个 站 点 运行 的 不 同方 式 ,也 了 解 虚拟 目录 


的 概念 ,本 节 将 介绍 Apache/Tomcat 中 虚拟 主机 和 虚拟 目录 的 概念 及 其 配置 方法 。 
2.6.1 虚拟 主机 及 其 设置 


在 同一 台 Web 服务 器 上 运行 多 个 网 站 的 技术 称 为 虚拟 主机 。 使 用 虚拟 主机 ,可 以 让 多 
个 站 点 共享 同一 台 物 理 机 器 ,减少 系统 的 运行 成 本 ,并 且 可 以 减 小 管理 的 难度 。 此 外 ,对 于 
个 人 用 户 , 也 可 以 使 用 这 种 虚拟 主机 方式 来 建立 有 自己 独立 域名 的 WWW 服务 器 。 

1. 虚拟 主机 的 类 型 

虚拟 主机 分 为 基于 IP 地 址 和 基于 域名 的 两 种 形式 : 

(1) 基于 IP 地 址 的 虚拟 主机 

所 谓 基于 IP 地址 的 虚拟 主机 方式 ,是 指 在 一 个 物理 计算 机 上 配置 多 个 IP 地 址 ,每 个 IP 
地 址 对 应 一 个 DNS 域名。 虽然 每 个 域名 对 应 不 同 的 IP 地 址 ,但 计算 机 是 同一 台 。 在 具体 
实现 中 ,如 果 每 个 虚拟 主机 (网 站 ) 使 用 不 同 的 端口 号 , 则 每 个 虚拟 主机 , 即 每 个 网 站 独立 运 
行 一 个 Apache 服务 程序 。 如 果 多 个 虚拟 主机 , 即 多 个 网 站 使 用 相同 的 端口 号 ,不 同 的 主机 
名 , 则 它们 将 共享 一 个 Apache 服务 。 

(2) 基于 域名 的 虚拟 主机 

所 谓 基 于 域名 的 虚拟 主机 方式 ,就 是 一 台 物理 计算 机 有 一 个 IP 地 址 ,但 用 户 在 DNS 服 
务 器 注册 多 个 不 同 的 域名 ,所 有 域名 都 解析 为 计算 机 的 同一 个 IP 地 址 。 用 户 通过 域名 访问 
不 同 的 网 站 , HTTP 服务 程序 根据 域名 来 区 分 用 户 的 不 同 访问 。 有 具体 说 , 当 客 户 程序 向 
WWW 服务 器 发 出 请 求 时 ,客户 想 要 访问 的 主机 名 也 通过 请 求 头 中 的 "Host: ”语句 传递 给 
WWW 服务 器 。WWW 服务 器 程序 接收 到 这 个 请 求 后 ,可 以 通过 检查 “ Host: ”语句 ,来 判定 
客户 程序 请 求 是 哪个 虚拟 主机 (网 站 ) 的 服务 ,然后 再 进一步 处 理 。 

基于 域名 的 虚拟 主机 相对 比较 简单 ,因为 只 需要 配置 你 的 DNS 服务 器 将 每 个 主机 名 映 
射 到 正确 的 IP 地 址 ,然后 配置 Apache HTTP 服务 器 , 令 其 辨识 不 同 的 主机 名 就 可 以 了 。 
基于 域名 的 服务 器 也 可 以 缓解 IP 地 址 不 足 的 问题 。 在 该 类 配置 中 ,由 于 多 个 网 站 共享 一 个 
IP 地 址 和 端口 ,多 个 虚拟 主机 使 用 一 个 Apache 服务 程序 ,各 个 虚拟 主机 共享 同一 份 
Apache, 因 此 有 CGI 程序 运行 时 ,安全 性 不 高 。 

2. 虚拟 主机 的 设置 

设 有 两 个 公司 共享 一 台 Web 服务 器 主机 ,公司 域名 分 别 是 www. companyl. com 和 
www. company2. com。 两 公司 在 DNS 域名 注册 时 均 设 定 这 台 Web 服务 器 的 IP 地 址 。 该 
Web 服务 器 采用 基于 名 字 的 虚拟 主机 设置 。 

为 测试 方便 ,使 用 本 地 DNS 解析 机 制 ,在 WINDOWS\system32\drivers\etc\hosts 文 
件 中 添加 上 述 的 域名 解析 ,IP 均 为 127.0.0. 1。 

(1) 基于 域名 的 虚拟 主机 设置 

在 Apache 安装 目录 下 的 \conf\extra\ 文 件 中 .找到 httpd-vhosts. conf 文件 ,进行 如 下 
配置 : 

a 为 每 个 虚拟 主机 建立 < VirtualHost > 段 。 

间 ServerName 是 网 站 域名 ,需要 跟 DNS 指向 的 域名 一 致 


井 DocumentRoot 是 网 站 文件 存放 的 根 目录 
<VirtualHost * :80 > 
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ServerName www. Company1 . com 
DocumentRoot "D: /company1" 
</VirtualHost > 


如 果 想 在 现 有 的 web 服务 器 上 增加 虚拟 主机 ,必须 也 为 现存 的 主机 建造 一 个 < 
VirtualHost > 定义 块 。 这 个 虚拟 主机 中 ServerName 和 DocumentRoot 所 包含 的 内 容 应 该 
与 全 局 的 ServerName 和 DocumentRoot 保持 一 致 。 还 要 把 这 个 虚拟 主机 放 在 配置 文件 的 
最 前 面 ,来 让 它 扮演 默认 主机 的 角色 。 

@ 打开 Apache 主 配 置 文件 httpd. conf, 开 启 虚 拟 主 机 配置 文件 。 


# Virtual hosts 
Include conf/extra/httpd - vhosts. conf 


@ 重启 Apache 服务 ,访问 虚拟 主机 。 

现在 Web 服务 器 上 有 三 个 站 点 , 即 中 心 主机 (Mainhost), 在 httpd. conf 中 设置 
DocumentRoot " D:/haosite"、 虚 拟 主 机 www. companyl. com (在 \conf\ extra\ httpd- 
vhosts. conf 配置 ) 和 虚拟 主机 www. company2. com( 在 \conf\extra\httpd-vhosts. conf 配置 ) 。 

然后 就 可 以 通过 域名 www. companyl. com 和 www. company2. com 访问 companyl 
和 company2 两 个 虚拟 主机 了 。 如 果 没 有 进行 Apache 和 Tomcat 的 整合 ,将 不 运行 JSP 中 
的 服务 端 脚本 程序 ,但 能 够 返回 静态 网 页 。 

3. Apache 与 Tomcat 虚拟 主机 的 一 致 

在 站 点 的 实际 运行 中 ,需要 Apache 和 Tomcat 的 集成 ,因此 只 配置 Apache 的 虚拟 主 
机 ,并 不 能 保证 整个 集成 的 有 效 运行 。 完 整 的 配置 总 结 如 下 : 

(1) 在 Apache 主 配置 文件 httpd. conf 中 ,取消 下 面 指令 的 注释 ,加 载 需要 的 代理 模块 : 

LoadModule proxy_module modules/mod_proxy. so 

LoadModule proxy_http_module modules/mod_proxy_http. so 


如 果 在 尾部 包含 下 述 Apache 代理 指令 ,将 其 注释 掉 , 写 到 httpd-vhosts. conf 中 的 虚拟 
主机 段 中 : 


# ProxyPass / http://localhost:8080/ 
# ProxyPassReverse / http://localhost:8080/ 


(2) 修改 httpd-vhosts. conf ,添加 虚拟 主机 ,并 集成 Tomcat: 


NameVirtualHost * :80 
<VirtualHost * :80> 
ServerName www. companyl . com 
ProxyPass / http://www.companyl. com:8080/ 
ProxyPassReverse / http://www. company1. com:8080/ 
</VirtualHost > 
NameVirtualHost * :80 
<VirtualHost * :80 > 
ServerName www. company2. com 
ProxyPass / http://www. company2. com:8080/ 
ProxyPassReverse / http://www.company2. com:8080/ 
</VirtualHost > 


(3) 打开 Apache 主 配 置 文件 httpd. conf ,开启 虚拟 主机 配置 文件 ， 


# Virtual hosts 
Include conf/extra/httpd - vhosts. conf 


(4) 在 Tomcat 服务 器 配置 文件 server. xml 中 ,定义 上 述 同 名 的 虚拟 主机 。 
在 Server. xml 的 尾部 是 主机 定义 元 素 < Host >, 一 般 内 容 为 : 
<Host name = "localhost" appBase = "webapps" 
unpackWARs = "true" autoDeploy = "true"> 
< 一 一 
< Valve className = "org. apache. catal ina. authenticator. SingleSignOn" /> 
一 一 > 
< Valve className = "org. apache. catalina. valves. AccessLogValve" directory= "logs" 
prefix = "localhost access log" suffix=".txt" 
pattern="%h %l1 %u %t&quot; %rgquot; %s %b" /> 
</Host > 


将 上 述 < Host > 元 素 删 除 ,添加 新 的 虚拟 主机 定义 , 即 在 尾部 添加 两 个 < Host > 元 素 ,内 


<Host name = "www. compony1. com" debug = "0" unpackWARs = "true"> 

< Context path = "" docBase= "D:\componyl" debug = "0" reloadable = "true" /> 
</Host> 
<Host name = "www. compony2. com" debug = "0" unpackWARs = "true"> 

< Context path="" docBase= "D:\compony2" debug = "0" reloadable = "true" /> 
</Host > 


当 上 述 配置 结束 后 ,就 可 以 正确 地 访问 虚拟 主机 ,并 执行 Tomcat 了 。 例 如 在 浏览 器 地 
址 栏 中 输入 http://www. companyl. com/ , 即 可 显示 d:\componyl 中 的 首页 文件 index. 
jsp。 需 要 特别 说 明 的 是 ,使 用 虚拟 主机 时 ,Apache 服务 应 使 用 默认 端口 80。 


2.6.2 虚拟 目录 及 其 设置 


在 Web 站 点 中 ,站 点 内 容 是 由 站 点 主 目录 下 的 所 有 子 文件 夹 和 文件 构成 的 。 所 谓 “ 虚 
拟 目录 ?就 是 一 个 指向 站 点 主 目录 以 外 的 物理 目录 的 指针 ,理论 上 讲 , 该 文件 夹 不 属于 站 点 
的 一 部 分 ,但 为 了 通过 站 点 访问 到 该 文件 夹 的 内 容 , 就 在 站 点 根 目录 下 创建 一 个 指向 该 外 部 
文件 夹 的 指针 , 即 虚拟 目录 ,以 便于 在 URL 中 书写 路 径 , 定 位 其 中 的 文件 。 

设置 了 虚拟 目录 后 ,访问 该 Web 站 点 主 目录 外 的 文件 ,通过 使 用 虚拟 目录 即 可 定位 ,在 
浏览 器 地 址 栏 输入 http://127. 0.0.1/ 虚 拟 目 录 / 文 件 名 。 

1. Tomacat 中 虚拟 目录 的 设置 

在 Tomcat 中 ,使 用 虚拟 目录 ,非常 简单 ,只 需要 修改 Tomcat 主 配置 文件 conf\server. 
xml, 在 尾部 的 主机 元 素 < Host > 中 ,增加 一 个 新 的 < Context > 元 素 即 可 。 例 如 : 建立 一 个 
到 d:/haosite 的 虚拟 目录 ,在 server. xml 中 ,在 根 目录 设置 的 后 面 增加 下 述 内 容 : 

<Context path = "/hao" docBase = "d:\haosite" reloadable = "true" crossContext = "true" 


Debug = "0" workdir = "d:\haosite\work"> 
</Context > 
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其 中 ,path 王 "/hao" 定 义 了 根 下 的 一 个 虚拟 目录 hao,docBase 王 "d:\haosite" 为 虚拟 目 
录 hao 对 应 的 物理 路 径 。 参 数 reloadable 设置 为 true. 表 明 修 改 Servlet 文件 ,jsp 文件 后 ， 
不 用 重启 Tomcat 即 可 生效 。 

保存 server. xml 文件 ,然后 重启 Tomcat 服务 器 ,就 可 以 在 地 址 栏 中 通过 虚拟 目录 访问 
d:/haosite 中 的 网 页 文件 了 ,例如 http://127. 0.0.1/hao/1.jsp。 

此 时 ,在 Tomcat 的 临时 文件 夹 C:\Tomcat\ work\Catalina\localhost 中 ,自动 创建 一 
个 与 虚拟 目录 同名 的 临时 文件 夹 hao ,存储 该 虚拟 目录 生成 的 临时 文件 。 

2. Apache 中 虚拟 目录 的 设置 

在 Apache 的 配置 文件 httpd. conf 下 搜索 Directory, 得 到 Apache 虚拟 目录 例子 。 记 着 
开启 虚拟 主机 模块 。Apache 配置 虚拟 目录 分 为 三 种 情况 : 

(1) 如 果 Apache 未 配置 虚拟 主机 ,在 httpd. conf 中 , 建 一 个 虚拟 日 录 elearning ,对 应 
的 物理 目录 为 D:/haosite/elearning, 配 置 如 下 : 


Alias /elearning "D:\haosite\elearning" 
<Directory "D:\haosite\elearning"> 
AllowOverride None 
Options None 
Order allow, deny 
Allow from all 
</Directory> 


(2) 如 果 Apache 配置 了 虚拟 主机 ,可 以 将 上 述 指令 添加 到 httpd-vhosts. conf 虚拟 主 
机 的 声明 中 , 即 : 


<VirtualHost * :80> 
ServerName www. companyl . com 
DocumentRoot "D: /company1" 
ProxyPass / http://www.company1. com:8080/ 
ProxyPassReverse / http://www.companyl. com:8080/ 


Alias /elearning "D:\haosite\elearning" 
<Directory "D:\haosite\elearning"> 
AllowOverride None 
Options None 
Order allow, deny 
Allow from all 
</Directory> 
</VirtualHost > 


(3) 如 果 Apache 已 经 和 Tomcat 进行 了 整合 ,还 需要 在 Tomcat 的 Server. xml 中 同时 
为 虚拟 主机 添加 虚拟 目录 ,配置 如 下 : 


<Host name = "www. company1. com" debug = "0" unpackWARs = "true"> 
<Context path = "" docBase = "d:/companyl" debug = "0" reloadable = "true"/> 
<Context path = "/elearning" docBase = "D:\haosite\elearning" reloadable = "true"/> 
</Host > 


当 虚 拟 主机 /虚拟 目录 配置 完成 后 ,运行 Web 浏览 器 ,在 地 址 栏 中 输入 一 个 URL ,访问 
虚拟 目录 下 的 页 面 , 例 如 http://www. companyl. com/elearning/1.jsp, 可 以 看 到 页 面 正确 
显示 。 


2.7 Web 服务 器 的 远程 管理 与 维护 


随 着 互联 网 的 发 展 ,服务 器 的 远程 管理 成 为 最 主要 的 管理 模式 。 不 同 的 服务 器 操作 系 
统 平台 ,管理 方式 和 所 使 用 的 管理 工具 不 同 , 但 本 质 上 都 是 在 服务 器 上 安装 或 配置 相应 的 服 
务 程序 ,用 户 通过 C/S 模式 或 B/S 模式 实现 对 服务 器 的 远程 管理 和 维护 。 


2.7.1 Windows 服务 器 中 网 站 的 管理 和 维护 


在 Windows Server 中 ,都 具有 远程 桌面 连接 服务 ,开启 该 服务 ,用 户 即 可 利用 
Windows 计算 机 的 “远程 桌面 连接 "程序 登录 服务 器 ,实现 对 服务 器 的 操作 。 要 开启 计算 机 
的 远程 桌面 服务 ,在 Windows 桌面 , 右 击 “计算 机 ”程序 图 标 ,在 快捷 菜单 中 ,执行 “属性 ” 命 
令 , 打 开 相 应 的 窗口 ,设置 开启 远程 桌面 服务 即 可 。 

当 服 务 器 开启 了 远程 桌面 服务 后 ,在 任何 一 台 Windows 计算 机 中 ,都 包含 了 “远程 桌面 
连接 ”程序 ,在 “开始 ”菜单 的 搜索 框 中 输入 “远程 桌面 连接 ”, 可 搜索 到 该 程序 ,运行 该 程序 ， 
即 可 显示 “远程 桌面 连接 ”对 话 框 ,如 图 2-41 所 示 。 





起 远程 桌面 连接 


得 点 硬 
So" 





计算 机 CC) [加 各 加 
CC 要 多 ] [和 中 ] [和 大 四 > 








图 2-41 “远程 桌面 连接 ”对 话 框 


输入 要 连接 的 计算 机 的 IP 地 址 , 单 击 “ 连 接 " 按 钮 ,显示 “Windows 登录 ”对 话 框 ,输入 
远程 计算 机 上 的 一 个 本 地 账户 和 密码 , 即 可 登录 到 远程 服务 器 主机 ,显示 其 桌面 , 接 下 来 就 
可 以 如 在 本 地 一 样 对 远程 的 计算 机 进行 操作 和 管理 了 ,进而 实现 对 网 站 的 管理 和 维护 。 

在 Windows 服务 器 中 ,除了 使 用 远程 桌面 进行 Windows 服务 器 的 管理 和 维护 外 ,如 果 
安装 了 IIS, 在 “万 维 网 服务 "组 件 中 ,包含 了 “远程 管理 (HTML)” 子 组 件 , 安 装 该 组 件 后 ,可 
以 对 Windows 服务 器 进行 基于 B/S 的 远程 管理 。 

具体 设置 如 下 : 

(1) 在 “计算 机 管理 ”控制 台中 ,在 “服务 和 应 用 程序 ”节点 下 ,展开 “Internet 信息 服务 ” 
管理 单元 。 

(2) 在 需要 远程 管理 的 Web 站 点 上 右 击 ,打开 快捷 菜单 ,执行 “属性 ”命令 ,打开 Web 
站 点 属性 对 话 框 。 在 “Web 站 点 ”选项 卡 中 , 记 下 该 站 点 的 TCP 端口 号 。 

(3) 在 Web 站 点 属性 对 话 框 中 ,选择 “目录 安全 性 ”选项 卡 , 在 “IP 地 址 和 域名 限制 ”区 
域 , 单 击 “ 编 辑 ” 按 钮 ,打开 “IP 地 址 和 域名 限制 ?对 话 框 ,执行 下 列 操作 之 一 : 
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。 如 果 要 允许 所 有 计算 机 远程 管理 IIS. 单 击 “ 授 权 访问 ? 单 选 按钮 。 或 者 : 
。 选中 “拒绝 访问 " 单 选 按钮 ,然后 单 击 “ 添 加 ”按钮 ,打开 “授权 访问 ”对 话 框 ,选择 要 授 
权 访 问 的 “单机 ”一 组 计算 机 ”或 者 “域名 ”, 按 照 系统 提示 进行 操作 。 

当 Web 服务 器 上 启用 了 基于 浏览 器 的 Internet 服务 管理 器 (HTML) 后 ,就 可 以 使 用 基 
于 浏览 器 的 Internet 服务 管理 器 了 。 

在 浏览 器 地 址 栏 输入 https://Web 服务 器 网 址 (域名 或 IP 地 址 ):8098/, 回 车 ,显示 
“连接 到 …” 对 话 框 ,输入 一 个 管理 员 权 限 的 用 户 账户 和 密码 , 则 打开 “服务 管理 ”站 点 , 即 通 
过 Web 接口 远程 维护 Windows Server 服务 器 ,如 图 2-42 所 示 。 
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图 2-42 Web 接口 远程 维护 Windows Server 2003 服务 器 界面 


通过 Web 接口 ,可 以 实现 Windows Server 服务 器 的 远程 维护 ,包括 : 站 点 、Web 服务 
器 、 网 络 用户 等 维护 功能 。 


2.7.2 Linux 服务 器 中 网 站 的 管理 和 维护 


在 互联 网 应 用 中 ,大 量 的 网 站 是 建立 在 Linux 服务 器 平台 上 的 .要 实施 对 网 站 的 远程 管 
理 和 维护 ,就 需要 了 解 Linux 服务 器 的 管理 知识 。 对 计算 机 系统 的 管理 ,不 管 是 Windows 
还 是 Linux, 甚 原理 都 是 一 样 的 ,都 采用 C/S 模式 或 B/S 模式 .并 且 对 远程 计算 机 进行 管理 ， 
用 户 使 用 的 计算 机 并 不 一 定 和 被 管理 的 服务 器 计算 机 使 用 相同 的 操作 系统 。 

目前 ,对 Linux 服务 器 的 远程 管理 和 维护 通常 使 用 SSH 工具 ,例如 putty、WinSCP 等 ， 
下 面 做 简要 介绍 。 

1. SSH(Secure Shell) 协议 

在 远程 管理 中 .有 多 种 通信 协议 ,常用 的 有 : 远程 登录 协议 Telnet, 早 期 客户 机 的 性 




















能 较 低 ,为 了 充分 使 用 服务 器 计算 机 较 高 的 配置 ,远程 登录 Telnet 应 运 而 生 。Telnet 是 早 
期 远程 登录 最 主要 的 工具 ,CLI 界 面 , 明 文 传输 ,现在 已 经 很 少 有 人 使 用 。 回 远程 桌面 协议 
(Remote Desktop Protocol, RDP) ,主要 用 于 Windows 系统 远程 管理 ,采用 C/S 模式 工作 ， 
可 看 做 是 GUI 界面 的 Telnet。@SSH(Secure Shell, 安 全 外 壳 ) 协 议 , 几 乎 所 有 的 类 UNIX 
操作 系统 都 采用 SSH 进行 远程 管理 。SSH 分 为 服务 器 端 和 客户 端 , 对 于 服务 器 端 ,SSH 是 
默认 开机 启动 的 ,作为 常 驻 服务 存在 。@RFB(Remote Frame Buffer) 协 议 , 图 形 化 远程 管 
理 协议 ,VNC(Virtual Network Computing) 就 是 基于 该 协议 类 UNIX 系统 常用 的 图 形 化 远 
程 管 理工 具 。 

2. Linux 系统 管理 工具 

Linux 系统 管理 工具 有 两 大 类 ,分别 是 : 

(1) 命令 行 界面 (CLD 管 理工 具 , 基 于 SSH 协议 ,SSH 分 为 服务 端 和 客户 端 ,在 Linux 
服务 器 中 ,SSH 服务 端 是 默认 开启 的 。 可 以 通过 service ssh status 命令 来 查看 。 客 户 端 可 
以 是 Windows 系统 计算 机 , 需 安装 SSH 客户 端 软 件 。 例如: 常用 的 SSH 工具 putty、 
WinSCP 等 ,为 开源 、 免 费 软件 ,有 Windows、Mac OS 等 多 种 版 本 。 用 户 可 以 从 网 上 免费 下 
载 ,复制 到 计算 机 中 即 可 运行 。Putty 为 命令 行 界面 ,WinSCP 为 图 形 界面 。 

(2) 图 形 用 户 界面 (GUD ,基于 VNC 协议 ,VNC(Virtual Network Computing) 是 一 种 
Linux 系统 (或 BSD、Mac OS 等 ) 下 常用 的 图 形 化 远程 管理 工具 ,使 用 RFB 协议 ,采用 C/S 
模式 工作 。 在 需要 进行 远程 管理 的 Linux 等 服务 器 上 安装 VNC 服务 端 程序 ,进行 必要 的 
配置 ,并 开启 服务 。 在 用 户 计 算 机 (可 以 是 Windows 等 ) 上 安装 VNC 客户 端 程序 ,常用 的 
VNC 工具 有 tigervnc 等 。 

下 面 简单 介绍 一 下 WinSCP 工具 的 使 用 。WinSCP 有 多 种 版 本 .如 果 我 们 使 用 的 客户 
机 为 Windows 系统 ,可 以 从 网 上 搜索 WinSCP for Windows, 将 其 复制 到 客户 计算 机 中 , 双 
击 WinSCP 可 执行 程序 ,显示 WinSCP 登录 对 话 框 , 如 图 2-43 所 示 。 






































图 2-43 ”WinSCP 程序 界面 
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输入 远程 主机 的 人 地址 ,用 户 名 、 密 码 , 然 后 单 击 * 登 录 ” 按 钮 ,显示 程序 寻找 主机 ,连接 和 
验证 过 程 ,登录 成 功 后 ,在 窗口 中 显示 本 地 计算 机 和 远程 计算 机 的 目录 结构 ,如 图 2-44 所 示 。 
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图 2-44 ”WinSCP 中 本 地 和 远程 Linux 服务 器 主机 窗口 


接 下 来 用 户 就 可 以 对 远程 Linux 计算 机 进行 管理 了 ,例如 文件 和 文件 夹 的 复制 .移动 、 
删除 等 操作 。 

由 于 Linux 应 用 软件 较 少 ,在 客户 机 上 安装 Linux 系统 的 用 户 还 较 少 。 但 是 ,在 服务 器 
领域 ,由 于 Linux 的 安全 性 和 效率 较 高 ,在 服务 器 主机 上 Linux 系统 的 装机 量 却 远 超 
Windows 服务 器 系统 ,因此 ,熟悉 Linux 服务 器 的 管理 和 维护 工具 的 使 用 是 非常 重要 的 。 


2.7.3 Web 站 点 的 云 部 署 与 管理 


在 传统 概念 里 ,要 建立 机 构 的 Web 站 点 ,需要 构建 服务 器 主机 ,在 服务 器 上 配置 Web 
服务 器 ,建立 Web 站 点 ,注册 域名 ,然后 提供 Web 服务 。 而 实际 情况 是 ,对 于 绝 大 多 数 的 小 
微 企业 、 公 司 、 组 织 或 个 人 ,因为 要 建设 Web 站 点 而 购买 服务 器 ,建立 服务 器 机 房 等 是 不 现 
实 的 。 虽 然 可 以 进行 服务 器 托管 ,以 减少 机 房 建设 和 维护 的 费用 ,但 这 种 专用 的 服务 器 也 会 
遇 到 利用 率 低 ,需要 更 新 淘汰 的 问题 。 

近年 来 , 随 着 网 云 的 发 展 , 许 多 大 的 互联 网 企业 ,例如 : 阿里 巴巴 .腾讯 QQ 百度 等 纷 
纷 建立 商业 网 云 ,搭建 各 自 的 云 计算 环境 ,为 用 户 提供 基于 云 计 算 的 各 种 云 服 务 ,包括 : 云 
服务 器 、 云 主机 、 云 网 络 .CDN(Content Delivery Network ,内 容 分 发 网 络 )` 云 存储 ( 云 盘 )、 
云 数 据 库 ` 云 虚拟 主机 、 域 名 服务 .企业 邮箱 等 。 

不 同 的 服务 商 , 提 供 的 功能 大 同 小 异 , 用 户 可 以 根据 云 服 务 资费 情况 .服务 质量 .站 点 性 
能 要 求 以 及 个 人 需求 选择 一 个 供应 商 ,将 站 点 部 署 到 云端 。 下面 以 阿里 云 (https://www. 
aliyun. com/) 为 例 ,介绍 Web 站 点 云 部 署 的 一 般 步 骤 。 

(1) 在 产品 列表 中 ,在 “域名 与 网 站 ”列表 中 , 单 击 “ 云 虚拟 主机 ”, 查 看 不 同 的 虚拟 主机 


配置 情况 ,包括 : 网 页 空间 大 小 、 数 据 库 大 小 、 内 存 大 小 .CPU 情况 .带宽 月 流量 .IP 地 址 
等 。 除 此 之 外 ,还 需要 查看 操作 系统 (Linux 版 ,Windows 版 ) 及 网 站 开发 语言 .数据 库 类 型 、 
Web 服务 器 等 。 

(2) 对 云 虚 拟 主 机 进行 配置 ,安装 服务 器 操作 系统 (Linux 或 Windows) ,安装 数据 服务 
器 , 流 媒 体 播放 器 ,Web 服务 器 等 。 

(3) 创建 Web 站 点 ,根据 虚拟 服务 器 设置 ,利用 FlashFXP 等 工具 完成 站 点 文件 的 
上 传 。 

(4) 注册 域名 ,在 云 服务 列表 中 ,可 以 注册 . cn,. com 等 域名 。 域 名 注册 后 ,需要 提供 个 
人 或 单位 材料 ,进行 认证 。 云 服务 机 构 负 责 将 认证 信息 报 送 域名 注册 局 (Domain Name 
Registry, 又 称 域名 注册 数据 库 ) 进 行 注册 ,由 网 络 信息 中 心 (Network Information Center， 
NIC) 管 理 与 维护 。 

(5) 将 域名 绑 定 到 云 虚 拟 服务 器 主机 IP, 绑 定 到 网 站 。 

不 同 的 云 服务 ,创建 云 Web 服务 器 和 站 点 的 步骤 大 同 小 异 , 用 户 可 以 选择 不 同 的 云 服 
务 ,进行 实际 的 建站 操作 ,感受 在 云 中 部 署 Web 服务 器 及 访问 网 站 的 实用 性 。 


本 章 小 结 


本 章 首先 介绍 了 操作 系统 、Web 服务 器 和 Web 应 用 开发 的 关系 ,然后 以 Windows 
Server/IIS 为 例 , 讲 解 了 Web 服务 器 的 安装 和 配置 过 程 .介绍 了 其 中 的 概念 ,包括 : 端口 号 、 
主 目录 、 默 认 文 档 以 及 安全 性 等 。 在 此 基础 上 ,重点 讲解 了 Apache 服务 器 和 Tomcat 服务 
器 的 功能 、 安 装 和 配置 。 讲 解 了 Apache 服务 器 和 Tomcat 服务 器 的 关系 ,Tomcat 服务 器 与 
JSP、Java 之 间 的 关系 ,以 及 Java 运行 环境 的 安装 和 环境 变量 配置 。 介 绍 了 虚拟 主机 和 虚拟 
目录 的 概念 ,讲解 了 Apache 和 Tomcat 中 虚拟 主机 和 虚拟 目录 的 配置 方法 。 最 后 ,对 Web 
站 点 的 远程 管理 和 内 容 维护 进行 了 介绍 。 


习 题 
1. 什么 是 Web 服务 器 ? 有 哪些 主流 的 Web 服务 器 产品 ? 


2. 在 Windows Server/IIS 中 , 当 连 接 新 建 的 Web 站 点 时 出 现 如 图 2-45 所 示 的 “输入 
网 络 密 码 ” 对 话 框 , 为 什么 ?如何 解 决 ? 











2-45 “输入 网 络 密码 ”对 话 框 
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3. 在 Windows/IIS 中 ,在 一 台 服 务 器 主机 中 运行 多 个 网 站 ,有 哪些 方式 ? 

4. Java 运行 环境 包括 哪些 内 容 ? 安装 JDK 后 ,需要 设置 哪些 系统 环境 变量 ? 简 述 设 
置 每 个 环境 变量 的 目的 。 

5. 简 述 Apache 服务 器 和 Tomcat 应 用 服务 器 的 功能 ,说 明 两 者 之 间 的 关系 。 

6. 安装 一 次 Tomcat, 简 述 Tomcat 目录 结构 中 各 个 目录 的 功能 。 

7. 在 Web 应 用 中 ,WEB-INF 文件 夹 的 作用 、Web 应 用 配置 文件 web. xml 的 功能 是 


8. 什么 是 虚拟 主机 和 虚拟 目录 ? 虚拟 主机 有 几 种 方式 ? 

9. 在 一 台 Windows 服务 器 上 ,能 同时 安装 IIS 和 Apache/Tomcat 吗 ? 如 果 能 ,在 IIS 
下 创建 的 网 站 和 Tomcat 下 的 网 站 能 同时 运行 吗 ?” 如 何 配置 ? 

10. 要 实现 对 Web 站 点 的 远程 管理 ,有 哪些 方式 ?请 简要 说 明 。 








第 3 章 HTML 与 XML 基础 


【本 章 导 读 】 

在 互联 网 的 发 展 过 程 中 ,1991 年 , 超 文本 标记 语言 (HyperText Markup Language， 
HTML) 问 世 , 正 是 标记 语言 概念 的 创新 ,给 互联 网 的 发 展 带 来 了 一 次 革命 ,促进 了 万 维 网 
的 诞生 。 今 天 ,面向 内 容 的 展示 和 表达 ,标记 语言 发 展 为 HTML 和 扩展 标记 语言 
(eXtensible Markup Language, XML) 两 个 不 同 的 规范 ,为 Web 应 用 提供 了 最 为 精巧 的 实 
现 技术 。 

本 章 将 从 广义 的 标记 语言 概念 出 发 ,介绍 标记 语言 的 概念 和 功能 ,对 HTML 规范 进行 总 
结 ,结合 Web 中 一 些 典 型 的 网 页 ,介绍 HTML 规范 中 常用 标记 的 功能 及 用 法 。 同 时 ,根据 目 
前 Web 开发 技术 的 发 展 , 重 点 讲解 Web 前 端 开 发 中 网 页 布局 的 概念 ,以 及 所 使 用 的 HTML 5 
和 CSS 3 中 的 相关 概念 。 最 后 ,对 XML 相关 技术 进行 了 介绍 ,讲解 了 XML 产生 的 背景 和 功 
能 ,以 及 XML 与 HTML 的 本 质 区 别 , 对 XML 技术 相关 的 概念 进行 了 简要 介绍 。 

【知识 要 点 】 

3.1 节 : 标记 语言 的 概念 ,标准 通用 标记 语言 SGML, 超 文本 标记 语言 HTML, 扩 展 标 
记 语言 XML。 

3.2 节 : 超 文本 标记 语言 HTML 文档 结构 ,标记 (标签 ), 标 记 属 性 ,段落 、 字 体 标记 ,图 
片 标 记 , 超 链接 标记 ,表格 标记 ,表单 标记 ,输入 域 标记 ,脚本 语言 , 帧 ,浮动 帧 。 

3.3 节 : 层 登 样式 表 (CSS) 的 概念 ,CSS 属性 ,样式 表 , 选 择 器 ,元 素 选择 器 ,关系 选择 
器 ,属性 选择 器 , 伪 类 选择 器 , 伪 对 象 选择 器 ,CSS 函数 。 

3.4 节 : 行内 元 素 , 块 元 素 , 网 格 布局 ,伸缩 盒 布 局 ,多 栏 布 局 。 

3.5 节 : 网 页 布局 ,输出 流 , 静 态 布局 , 流 式 布局 , 自 适应 布局 ,响应 式 布 局 。 

3.6 节 : HTML 5,CSS 3, 文 档 语 义 , 文 档 结 构 标 记 , 多 媒体 标记 ,画布 标记 (< canvas >) 
表单 输入 类 型 。 

3.7 节 : 扩展 标记 语言 XML,XML 文档 结构 ,文档 类 型 定义 (DTD) ,XML Schema( 架 
构 ),XSD 预定 义 元 素 , 预 定义 数据 类 型 ,元素 声明 ,属性 定义 ,可 扩展 样式 语言 XSL。 


3.1 标记 语言 及 其 发 展 


在 标记 语言 这 个 概念 出 现 以 前 ,标记 的 概念 就 已 经 出 现 了 。 例 如 ,在 出 版 印刷 行业 ,人 
们 在 对 文字 内 容 进行 审阅 时 对 内 容 所 做 的 标记 .通过 这 些 标记 符号 来 表达 对 内 容 的 修改 意 
见 。 在 互联 网 发 展 的 早期 ,人 们 对 内 容 以 怎样 的 方式 在 计算 机 的 屏幕 上 展示 ,并 未 有 好 的 想 
法 。 直 到 1991 年 ,一 种 汲取 了 标准 通用 标记 语言 SGML 灵感 ,对 网 络 内 容 的 展示 进行 标注 
的 技术 出 现 了 ,这 就 是 超 文本 标记 语言 (HyperText Markup Language,HTML) ,这 催生 了 
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WWW 的 出 现 , 成 为 互联 网 发 展 的 第 一 个 里 程 碑 。 
3.1.1 标准 通用 标记 语言 SGML 


20 世纪 60 年 代 , 计 算 机 应 用 的 领域 不 断 扩展 ,在 出 版 印刷 行业 , 人们 开始 使 用 计算 机 
进行 大 规模 数据 处 理 。1969 年 ,美国 IBM 公司 的 研究 人 员 开 始 设计 一 种 名 为 GML 
(Generalized Markup Language) 的 语言 ,用 于 对 电子 表格 中 文件 的 结构 和 内 容 进 行 描述 。 经 过 
十 多 年 的 研究 ,于 1980 年 推出 了 标准 通用 标记 语言 SGML (Standard Generalized Markup 
Language) ,并 于 1986 年 获得 国际 标准 化 组 织 ISO 的 批准 ,成 为 国际 标准 (ISO-8879)。 

为 了 满足 各 种 不 同 的 页 面 表达 需要 ,SGML 设计 得 非常 复杂 ,SGML 的 正式 规范 达 500 
多 页 ,使 用 起 来 很 不 方便 ,使 得 它 未 能 得 到 普及 和 大 规模 的 应 用 。 因 此 ,SGML 并 不 为 其 领 
域 之 外 的 人 们 所 广泛 了 解 。 直 至 1991 年 , 当 超 文本 标记 语言 HTML 问世 之 后 ,人 们 才 开 
始 认 识 SGML。 虽 然 SGML 没有 被 广泛 应 用 ,但 是 SGML 的 意义 非凡 , 它 定义 了 标记 语言 
的 基本 概念 ,奠定 了 标记 语言 发 展 的 技术 基础 。 

现在 ,在 Web 中 普遍 应 用 的 标记 语言 HTML 和 XML 都 是 在 SGML 的 基础 上 开发 成 
功 的 ,可 以 说 它们 都 是 SGML 的 一 个 子 集 。 作 为 互联 网 信息 共享 的 技术 规范 ,标记 语言 对 
互联 网 的 发 展 起 到 了 巨大 的 推动 作用 。 


3.1.2 超 文 本 标记 语言 HTML 


在 互联 网 发 展 早期 ,为 了 在 各 种 网 络 环境 之 间 , 不 同文 件 格式 之 间 进 行 交 流 , 在 SGML 
基础 上 ,欧洲 核子 研究 组 织 CERN 的 伯 纳 斯 ，。 李 (Tim Berners-Lee) 于 1991 年 首先 提出 了 
超 文本 标记 语言 (Hyper Text Markup Language,HTML) 的 概念 。 简 单 地 讲 , HTML 是 一 
种 用 来 制作 超 文本 文档 的 简单 标记 语言 ,他 定义 了 一 组 标记 符号 (tag) ,对 文件 的 内 容 进 行 
标注 ,指出 内 容 的 输出 格式 ,如 字体 大 小 .颜色 .背景 颜色 .表格 形式 .各 部 分 之 间 风 辑 上 的 组 
织 等 ,从 而 实现 了 文件 格式 的 标准 化 。 

HTML 文件 包含 了 文档 数据 和 显示 样式 两 部 分 ,其 中 文档 数据 是 显示 在 Web 浏览 器 
中 的 数据 内 容 , 显 示 样 式 则 规定 了 这 些 内 容 在 浏览 器 中 以 何 种 格式 、 样 子 呈 现 给 用 户 。 通 过 
统一 使 用 支持 HTML 的 浏览 软件 ,用 户 可 以 在 任意 异 构 的 网 络 环境 中 ,阅读 同一 个 文件 ， 
得 到 相同 的 显示 结果 ,并 可 以 对 文件 进行 跳跃 式 阅 读 ,展现 了 很 强 的 表现 力 。 

超 文 本 标记 语言 的 概念 出 现 后 ,其 思想 的 实现 需要 得 到 浏览 器 软件 的 支持 ,HTML 标 
准 化 是 HTML 发 展 的 首要 任务 。 在 HTML 提出 后 的 较 短 时 间 里 ,出 现 了 各 种 各 样 的 
HTML 版 本 ,包括 伯 纳 斯 。 李 的 版 本 ,这 个 版 本 没有 定义 IMG 标记 。 为 了 实现 HTML 的 
标准 化 ,从 1993 年 开始 ,人 们 在 各 种 已 有 HTML 版 本 的 基础 上 ,试图 设计 一 个 HTML 的 
超 集 ,当时 被 称 为 HTML 十 ,这 一 设计 最 终 并 未 实现 。 

在 随后 的 HTML 标准 的 研发 中 ,为 了 和 当时 各 种 各 样 的 HTML 标准 区 分 , W3C9 发 


@ 万 维 网 联盟 (World Wide Web Consortium,W3C) ,又 称 W3C 理事 会 ,1994 年 10 月 在 麻 省 理工 学 院 计算 机 科学 
实验 室 成 立 , 其 创建 的 初始 目的 是 为 了 完成 麻 省 理工 学 院 (MIT) 与 欧洲 核子 研究 组 织 C(CERN) 之 间 的 协同 工作 ,并 得 到 
了 美国 国防 部 高 级 研究 项 目 署 局 (DARPA) 和 欧洲 委员 会 (European Commission) 的 支持 。 现 已 发 展 为 Web 技术 领域 最 
具 权威 和 影响 力 的 国际 中 立 性 技术 标准 机 构 。 到 目前 为 止 ,W3C 已 发 布 了 200 多 项 影响 深远 的 Web 技术 标准 及 实施 指 
南 , 如 广 为 业 界 采 用 的 超 文本 标记 语言 HTML ,可 扩展 标记 语言 XML 以 及 帮助 残障 人 士 有 效 获 得 Web 内 容 的 信息 无 障 
碍 指南 (WCAG) 等 ,有 效 促进 了 Web 技术 的 互相 兼容 ,对 互联 网 技术 的 发 展 和 应 用 起 到 了 基础 性 和 根本 性 的 支撑 作用 。 


布 的 HTML 标准 从 HTML 2.0 开 始 ,HTML 初期 的 各 种 版 本 ,包括 伯 纳 斯 。 李 的 版 本 被 
视 作 HTML 的 初始 版 ,或 者 叫 HTML 1.0。HTML 主要 版 本 和 发 布 时 间 如 下 

(1) HTML 2. 0,1993 年 开始 研发 ,1995 年 11 月 由 Internet 工程 任务 组 中 的 HTML 
工作 组 开发 完成 并 发 布 。 

(2) HTML 3,1995 年 3 月,W3C 提出 了 HTML 3.0 规范 ,包括 很 多 新 的 特性 ,例如 表 
格 .文字 绕 排 和 复杂 数学 元 素 的 显示 。 虽 然 它 是 被 设计 用 来 兼容 HTML 2. 0 版 本 的 ,但 是 
实现 这 个 标准 的 工作 在 当时 过 于 复杂 .在 草案 于 1995 年 9 月 过 期 时 ,标准 开发 也 因为 缺乏 
浏览 器 支持 而 中 止 。HTML 3. 1 版 从 未 被 正式 提出 ,下 一 个 被 提出 的 版 本 是 HTML 3. 2， 
去 掉 了 大 部 分 HTML 3.0 中 的 新 特性 ,加 入 了 很 多 特定 浏览 器 元 素 及 属性 。HTML 对 数 
学 公式 的 支持 最 后 成 为 另外 一 个 标准 MathML。1997 年 1 月 14 日 ,W3C 发布 HTML 3.2， 
在 HTML 2.0 标准 中 添加 了 诸如 : 字体 .表格 Java 程序 、 浮 动 、 上 标 、 下 标 等 特征 。 

(3) HTML 4.0,1997 年 12 月 18 日 ,W3C 发 布 HTML 4.0,HTML 4.0 中 最 重要 的 特 
征 是 引入 了 样式 表 CSS 技术 ,使 网 站 样式 与 内 容 分 离 ,使 得 网 站 结构 更 加 清晰 ,内 容 更 加 简 
洁 。 随 后 ,在 HTML 4.0 基础 上 ,W3C 于 1999 年 12 月 推出 其 改进 版 HTML 4. 01, 它 对 原 
版 本 做 出 了 部 分 修正 。 

(4) HTML 5, 作 为 下 一 代 超 文本 标记 语言 的 标准 ,草案 最 早 于 2004 年 提出 ,在 经 历 了 
多 年 的 功能 开发 和 改动 之 后 ,2014 年 10 月 29 日 ,W3C 发 布 了 HTML 5 规范 ,其 标准 化 进 
程 预计 于 2020 年 完成 。 现 在 各 类 最 新 版 本 的 浏览 器 早已 提供 了 对 HTML 5 大 部 分 功能 的 
支持 ,因此 ,用 户 不 会 注意 到 各 大 网 页 会 有 任何 变化 。 

在 下 一 代 HTML 标准 HTML 5 的 发 展 过 程 中 , W3C 希望 净化 XHTML 2, 回 归 第 一 
版 HTML 的 设计 理念 。 但 是 ,这 样 的 设计 理念 遭 到 了 W3C 之 外 的 一 些 重要 的 HTML 专 
家 ,包括 浏览 器 厂商 ,Web 开发 人 员 ,作者 和 其 他 有 关 人 员 的 质疑 ,2004 年 ,他 们 成 立 了 一 个 
独立 的 工作 组 , 即 WHATWG(Web Hypertext Application Technology Working Group， 
Web 超 文本 应 用 程序 技术 工作 组 ), 为 新 的 HTML 版 本 提出 了 新 的 设计 方向 。 


3.1.3 可 扩展 标记 语言 XML 


从 本 质 上 讲 ,HTML 是 一 种 数据 展示 技术 . 它 定 义 了 一 组 标记 ,每 个 标记 都 定义 了 数据 
在 浏览 器 中 特定 的 显示 样式 。 对 于 数据 的 结构 和 语义 .HTML 并 不 能 表达 。 为 此 ,一 种 旨 
在 表达 数据 语义 的 标记 语言 产生 了 ,这 就 是 可 扩展 标记 语言 (eXtensible Markup 
Language,XML)。1998 年 2 月 10 日 ,XML 工作 组 正式 向 W3C 提交 了 XML 的 最 终 推荐 
标准 ,这 就 是 XML 1.0 标 准 。XML 规范 定义 了 标记 语言 的 主要 特征 ,例如 DTD、 
XMLSchema 等 基本 要 素 , 这 些 要 素 可 以 很 好 地 用 于 定义 数据 ,实现 异 构 环 境 下 的 数据 
交换 。 

可 以 说 ,XML 是 一 种 数据 表达 技术 , 它 允 许 用 户 自己 定义 标记 ,通过 标记 来 表达 数据 
的 语义 ,这 种 定义 可 以 非常 严格 ,甚至 比 计算 机 程序 设计 语言 中 数据 类 型 对 数据 和 取 值 范围 
的 约束 更 加 严格 和 规范 。XML 不 关心 数据 在 浏览 器 中 的 显示 问题 ,数据 的 显示 最 终 还 要 
通过 HTML 来 标记 ,这 样 ,通过 XML 和 HTML 的 结合 .数据 的 表达 和 展示 就 紧密 地 融合 
在 一 起 ,同时 ,很 好 地 解决 了 文档 中 数据 和 显示 的 分 离 问 题 。 对 Web 应 用 的 开发 提供 了 非 
常 好 的 扩展 性 和 开放 性 框架 。 


电 TML 与 XML 基础 
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在 XML 技术 中 ,对 XML 文档 内 容 的 显示 ,查询 及 操作 则 通过 其 他 一 系列 的 规范 来 实 
现 , 这 些 相关 的 规范 包括 : 可 扩展 样式 语言 XSL、XML 路 径 语言 XPath、XML 查询 语言 
XQuery、 可 扩展 连接 语言 XLL 以 及 XML 文档 对 象 模型 DOM 与 简单 应 用 程序 接口 SAX 
等 ,通过 这 些 规范 来 实现 对 XML 文档 的 显示 及 其 他 各 种 操作 。 


3.1.4 可 扩展 HTML 规范 XHTML 


在 HTML 的 发 展 过 程 中 ,暴露 出 一 些 影响 其 发 展 的 缺陷 ,例如 : HTML 的 标记 固定 ， 
HTML 只 是 一 种 表现 技术 ,不 能 表达 语义 ; 不 能 适应 现在 越 来 越 多 的 网 络 设备 和 应 用 的 
需要 ,比如 手机 、PDA. 信 息 家 电 都 不 能 直接 显示 HTML; 由 于 HTML 代码 不 规范 、 腔 
肿 , 浏 览 器 需要 足够 智能 和 庞大 才能 够 正确 显示 HTML; 数据 与 表现 混杂 ,页 面 要 改变 
显示 ,就 必须 重新 制作 HTML。 因 此 ,1999 年 ,W3C 推出 HTML 4. 01 后 ,HTML 的 发 
展 缓慢 。 

2000 年 底 ,W3C 制定 了 可 扩展 HTML, 妈 XHTML(EXtensible HyperText Markup 
Language) ,XHTML 是 一 种 在 HTML 4 基础 上 优化 和 改进 的 新 语言 。 建 立 XHTML 的 目 
的 就 是 实现 HTML 向 XML 的 过 渡 ,是 一 种 文档 设计 的 新 思想 。 在 网 站 设计 中 ,通常 所 说 
的 CSS 十 DIV, 即 是 基于 XHTML 应 用 的 一 种 表现 。 

作为 HTML 的 继承 者 ,XHTML 和 HTML 的 主要 差异 在 于 ,HTML 语法 要 求 比 较 松 
散 , 这 样 对 网 页 编写 者 来 说 ,比较 方便 ,但 对 于 机 器 来 说 ,语言 的 语法 越 松 散 ,处 理 起 来 就 越 
困难 ,对 于 普通 计算 机 来 说 ,具有 处 理 兼 容 松散 语法 的 计算 能 力 , 但 对 于 许多 其 他 智能 设备 ， 
比如 手机 ,难度 就 比较 大 。 因 此 ,定义 语法 要 求 更 加 严格 的 XHTML 就 显得 具有 特别 的 意 
义 。 因 此 ,本 质 上 讲 ,XHTML 就 是 基于 XML 的 HTML .是 一 种 采用 XML 语法 ,语法 严 
谨 、 结 构 良 好 的 HTML, 除 此 之 外 .XHTML 与 HTML 4.01 几乎 是 相同 的 。 

从 XHTML 提出 到 现在 ,与 HTML 和 XML 相 比 ,XHTML 似乎 并 不 为 人 所 知 。 这 
也 符合 当时 提出 XHTML 的 初衷 ,就 是 要 让 HTML 文档 更 加 严格 和 规范 ,因为 结构 良好 
的 文档 会 极 大 地 提高 程序 的 文档 解析 效率 ,这 比 松散 的 语法 给 页 面 制作 者 带 来 的 方便 更 
有 意义 。 随 着 HTML 5 和 XML 的 日 臻 成熟,XHTML 所 追求 的 语法 严谨 和 结构 良好 的 
思想 正在 新 的 HTML 和 XML 中 实现 ,现在 的 浏览 器 均 支 持 HTML 和 XML, 也 即 支 持 了 
XHTML。 


3.2 超 文 本 标记 语言 


超 文 本 标记 语言 HTML(Hyper Text Markup Language, HTML) 是 在 SGML 基础 上 
发 展 起 来 的 ,是 互联 网 中 应 用 最 为 广泛 的 标记 语言 ,被 称 为 World Wide Web 的 通用 出 版 语 
言 。 简 单 地 讲 ,HTML 就 是 由 一 系列 标记 构成 的 ,每 一 个 标记 给 定 了 一 组 特定 的 显示 样式 ， 
它们 共同 构成 HTML 语言 标准 ,由 W3C 发 布 ,各 Web 浏览 器 厂商 实现 并 支持 。 

长 期 以 来 ,互联 网 中 常用 的 HTML 版 本 是 HTML 4.01。 随 着 HTML 5 的 推出 ,浏览 
器 对 HTML 5 的 支持 越 来 越 广泛 ,人 们 开始 更 多 地 制作 符合 HTML 5 规范 的 网 页 。 由 于 
HTML 5 内 容 很 多 ,本 节 主 要 讲解 HTML 4. 01 规范 ,关于 HTML 5 规范 的 发 展 将 在 后 面 
的 3.5 节 介 绍 。 





3.2.1 标记 、 属 性 与 元 素 的 概念 


在 传统 的 文字 处 理 中 ,文档 编辑 结束 后 ,通常 还 需要 对 文档 内 容 进 行 格式 化 ,也 就 是 说 
设 定 文字 的 字形 .字体 、 字 号 ,以 及 段 前 、 段 后 , 行 间距 等 ,从 而 保证 所 编辑 的 文档 显示 和 打印 
更 加 美观 。 在 互联 网 中 ,对 网 页 的 处 理 也 是 一 样 的 ,也 需要 对 网 页 文件 进行 格式 化 ,这 就 是 
对 网 页 内 容 进 行 标记 ,从 而 保证 所 标记 的 内 容 以 特定 的 格式 和 布局 在 浏览 器 中 显示 。 

1. 标记 的 概念 

在 互联 网 中 ,网 页 文件 是 一 种 纯 文本 文件 ,由 “内 容 " 和 “标记 ”两 部 分 组 成 。 标 记 描 述 内 
容 以 何 种 形式 在 浏览 器 中 显示 ,也 就 是 说 “标记 (Tag)” 是 对 内 容 的 标记 ,又 称 为 “标签 ”。 在 
HTML 中 ,标记 由 封装 在 小 于 号 (二 ) 和 大 于 号 (二 ) 构 成 的 一 对 尖 括 号 之 中 ,标记 一 般 分 首 
标记 和 尾 标记 ,它们 成 对 出 现 。 首 标记 用 于 开启 某 种 形式 的 显示 , 尾 标记 用 于 关闭 首 标记 开 
启 的 显示 功能 。 例 如 : < u > 欢迎 光临 </u>, 首 标记 < u > 开启 下 夯 线 功能 , 尾 标 记 </u > 关闭 
下 画 线 功能 。 该 语句 在 浏览 器 中 将 把 文本 串 * 欢 迎 光临 ?加 上 下 画 线 显 示 。 

标记 分 为 “ 单 标记 ”和 ”* 双 标记 ?两 种 类 型 。“ 单 标记 ?是 指 只 需 单独 使 用 就 能 完整 地 表达 
意思 的 一 类 标记 , 单 标记 不 标记 任何 内 容 , 单 标记 的 一 般 形式 是 : 

< 标记 > 

常用 的 单 标记 有 换行 标记 < br >, 水 平 线 标记 < hr > 等 。 

另 一 类 标记 称 为 “ 双 标 记 ”, 由 “ 首 标记 ”和 “ 尾 标 记 ” 两 部 分 构成 ,必须 成 对 使 用 。 首 标记 
告诉 Web 浏览 器 从 此 处 开始 执行 该 标记 所 表示 的 功能 ,而 尾 标记 则 告诉 Web 浏览 器 在 这 
里 结束 该 功能 。 首 标记 名 称 前 加 一 个 斜 杠 (/) 即 成 为 尾 标记 。 双 标记 的 一 般 形式 是 : 

< 标记 > 内 容 </ 标 记 > 

其 中 “内 容 ” 部 分 就 是 要 被 这 对 标记 施加 作用 的 部 分 。 例 如 ,如 果 需 要 标记 一 段 文本 要 
红色 显示 , 则 将 文本 放 在 双 标 记 < font color 二 "#FF0000">…</font> 中 即 可 , 即 : 


<font color = " 闪 FF0000"> 您 好 </font > 


标记 可 以 被 Web 浏览 器 解释 ,对 所 标记 的 内 容 以 特定 的 样式 在 浏览 器 中 显示 。 对 于 其 
他 的 文本 阅读 器 ,例如 记事 本 等 , 则 不 能 解析 标记 的 含义 。 

2. 标记 属性 

在 HTML 规范 中 ,标记 都 设 定 了 默认 的 显示 样式 ,例如 ,< hr > 标记 一 条 水 平 线 , 线 宽 、 
颜色 和 线 型 都 是 默认 的 。 为 了 增强 标记 显示 样式 的 灵活 性 ,标记 中 通常 还 包含 一 系列 标记 
属性 ,通过 为 标记 属性 赋值 ,可 以 修改 标记 的 默认 显示 样式 。 

标记 属性 分 为 一 般 属 性 和 事件 属性 两 种 类 型 ,一般 属性 对 应 一 个 相应 的 属性 值 ,事件 属 
性 则 对 应 一 段 程序 代码 或 一 个 函数 。 事 件 主要 是 指 鼠 标 、 键 盘 操 作 等 ,其 主要 目的 是 增加 用 
户 和 网 页 的 交互 性 , 当 标记 上 的 对 应 事件 发 生 时 ,事件 属性 对 应 的 程序 代码 被 激活 。 

设置 标记 属性 的 一 般 形式 是 : 

< 标记 属性 = "属性 值 | 程序 代码 " 属性 = "属性 值 | 程序 代码 ”…> 


各 属性 之 间 无 先后 次 序 , 属 性 之 间 用 空格 分 开 。 属 性 也 可 省 略 ( 即 取 默认 值 ) ,属性 值 两 
侧 一 般 为 西 文 双 引 号 ("), 也 可 以 使 用 西 文 单 引 号 (') ,或 省 略 不 写 。 这 种 书写 上 的 灵活 性 便 





电 TML 与 XML 基础 


所 w 四 


Web 技术 时 论 (第 4 版 ) 





于 页 面 制作 人 员 的 书写 ,但 却 增加 了 Web 浏览 器 进行 文档 解析 的 计算 量 。 因 此 ,一 个 结构 
良好 的 网 页 文件 ,应 该 是 在 属性 值 两 侧 使 用 双 引 号 (") ,而 不 是 随 性 而 为 。 
不 同 的 标记 ,拥有 的 属性 也 不 一 样 。 但 是 ,有 些 属性 是 大 多 数 标记 都 有 的 ,这 种 属性 称 
为 通用 属性 ,例如 : id 属性 ,name 属性 ,style 属性 ,class 属性 ,title 属性 等 。 
3. 元 素 的 概念 
在 标记 语言 的 发 展 过 程 中 ,人 们 认识 到 传统 HTML 中 单 标记 的 定义 和 标记 本 身 是 矛 
盾 的 。 因 为 ,所 谓 标 记 , 就 是 对 内 容 的 标记 ,而 单 标记 却 没有 要 标记 的 内 容 , 又 如 何 称 为 标记 
呢 ? 这 种 概念 上 的 自 相 矛盾 ,以 及 后 来 在 浏览 器 处 理 标记 解析 时 单 标记 所 带 来 的 额外 计算 
量 ,都 使 得 我 们 想到 一 个 新 的 概念 ,这 就 是 元 素 (element) ,我 们 可 以 将 内 容 和 对 它 的 标记 作 
为 一 个 整体 来 看 待 ,这 就 是 元 素 。 
一 个 元 素 由 三 部 分 组 成 ,包括 : 起 始 标 记 , 元 素 内 容 和 结束 标记 。 例 如 : 
< p> 你 好 </p>, 就 可 以 说 成 是 一 个 <p > 元 素 ,其 中 元 素 内 容 为 “你 好 ”。 
对 于 单 标记 ,因为 不 标记 任何 内 容 , 可 以 说 成 是 空 元 素 。 
4. HTML 文档 结构 
HTML 文档 是 指 按照 HTML 规范 书写 的 文本 文件 ,分 成 文件 头 和 文件 体 两 个 部 分 ,由 
相应 的 标记 来 区 分 。HTML 文档 总 体 结构 如 下 : 
<!DOCTYPE > 文档 声明 指令 
< html > 
< head > 
头 部 信息 
</head> 
<body> 
文档 主体 
(语句 部 分 ) 
</body > 
</html > 


一 个 HTML 文档 的 第 一 行 通常 是 文档 声明 指令 <! DOCTYPE >, 用 于 指定 文档 的 类 
型 和 版 本 。 因 为 ,在 Web 中 ,文档 的 类 型 很 多 ,文档 声明 的 目的 就 是 告诉 浏览 器 当前 文档 所 
使 用 的 HTML 版 本 ,以 便于 浏览 器 对 文档 的 正确 解析 。 

常见 的 几 种 文档 声明 是 : 

(1) HTML 4. 01 文档 声明 : 


<!DOCTYPE html PUBLIC " - //W3C//DTD HTML 4.01 Transitional//EN" 
http: //waw. w3. org/TR/html4/loo0se. dtd"> 


(2) XHTML 1.0 文档 声明 : 


<! DOCTYPE html PUBLIC " - //W3C//DID XHTML 1.0 Strict//EN" 
"http://www.w3. org/TR/xhtml1/DTD/xhtm]l1 - strict. dtd"> 


(3) HTML 5 文档 声明 : 


<!DOCTYPE html > 


在 HTML 4.01 和 XHTML 1.0 中 ,定义 了 三 种 文档 类 型 : DStrict ,严格 型 DTD, 与 层 
县 样式 表 配 合 使 用 。@Transitional ,过渡 型 DTD, 包 含 了 CSS 样式 表 的 呈现 属性 和 元 素 ， 
如 果 浏 览 器 不 支持 层 释 样式 表 , 需 使 用 此 类 型 。@Frameset,Frameset 框架 版 DTD ,支持 使 
用 框架 。 根 据 上 述 指令 ,浏览 器 将 首先 寻找 匹配 此 公共 标识 符 的 DTD。 如 果 找 不 到 ,浏览 
器 将 使 用 公共 标识 符 后 面 的 URL 作为 寻找 DTD 的 位 置 。 

在 HTML 5 文档 中 ,因为 HTML 5 不 基于 SGML, 因 此 在 文档 声明 指令 中 ,没有 对 文 
档 类 型 定义 (Document Type Defination,DTD) 的 引用 。 

在 一 个 HTML 文档 中 ,标记 < html >…</html > 表示 这 对 标记 间 的 内 容 是 HTML 文 
档 , 可 以 省 略 不 写 ,浏览 器 可 通过 文件 扩展 名 识别 。< head >...</head > 标记 文件 头 ,包含 一 
系列 子 标记 , 若 不 需 头 部 信息 则 可 省 略 此 标记 。< body >...</body > 标记 文件 体 ,表示 正文 
内 容 的 开始 ,< body > 标记 一 般 不 能 省 略 ,其 中 的 内 容 将 显示 在 浏览 器 主 窗口 的 客户 区 。 
3.2.2 文档 头 标记 及 子 标 记 

在 HTML 文档 中 ,< head >…</head > 标记 对 之 间 的 部 分 称 为 文档 头 。 根 据 Web 的 工 
作 原 理 , 在 Web 服务 器 和 Web 浏览 器 的 HTTP 通信 中 ,HTTP 头 为 浏览 器 和 服务 器 提供 
辅助 信息 ,这些 辅助 信息 也 可 以 写 在 HTML 文档 的 头 部 ,为 浏览 器 搜索 引擎 等 提供 信息 。 
例如 : 设置 网 页 内 容 字符 编码 ,设置 网 页 有 效 期 等 ,这 可 以 使 浏览 器 按照 设 定 的 字符 编码 正 
确 地 显示 网 页 内 容 , 以 及 让 浏览 器 决定 是 否 需 要 从 服务 器 上 下 载 网 页 。 

在 HTML 中 ,文档 头 由 若干 子 标记 构成 ,主要 的 子 标记 有 : 

1. < title ></title > 标记 

用 于 标识 网 页 标题 ,其 中 的 内 容 将 在 浏览 器 的 标题 栏 中 或 页 面 选项 卡 显示 。 设 置 网 页 
< title > 标记 , 当 用 户 在 打开 多 个 网 页 时 ,根据 页 面 标题 ,可 以 方便 页 面 切换 。 

2. < meta > 标记 

meta 即 “ 元 ”的 意思 ,meta data 即 元 数据 ,是 关于 数据 的 数据 。 元 标记 < meta > 是 最 重 
要 的 辅助 性 标记 ,往往 不 引起 用 户 的 注意 ,但 是 它 对 于 浏览 器 显示 网 页 ,以 及 是 否 能 够 被 搜 
索引 擎 检索 .提高 网 页 在 搜索 列表 的 排序 起 着 关键 的 作用 ,是 一 个 非常 有 价值 的 标记 。 

< meta > 标记 为 单 标记 ,有 两 个 常用 属性 , 即 http-equiv 属性 和 name 属性 ,不 同 的 属性 
又 有 不 同 的 参数 值 ,这些 不 同 的 参数 值 实现 了 不 同 的 网 页 功能 。 

(1) http-equiv 属性 

http-equiv 相当 于 HTTP 头 ,向 浏览 器 传 回 一 些 有 用 的 信息 ,以 帮助 正确 显示 网 页 内 
容 ,与 之 对 应 的 属性 值 为 content,content 中 的 内 容 其 实 就 是 各 个 参数 的 变量 值 。meat 标 
http-equiv 属性 语法 格式 是 : 

<meta http- equiv= "参数 名 ”content = "参数 值 "> 

其 中 http-equiv 属性 参数 对 应 了 HTTP 头 属性 名 ,主要 有 以 下 几 种 参数 : 

。 content-type, 设 定 页 面 文档 类 型 及 使 用 的 字符 集 。 

例如 : < meta http-equiv 二 "content-type" content 二 "text/html; charset 一 gb2312">， 
该 < meta > 标记 告知 浏览 器 ,文档 为 HTML 文档 ,参数 charset 设置 文档 所 使 用 的 字符 集 
为 gb2312。 
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在 页 面 制作 中 ,字符 集 的 设置 至 关 重 要 ,字符 集 不 仅 影 响 到 网 页 的 显示 ,还 影响 服务 器 
页 面 中 程序 的 运行 。 目 前 常用 的 字符 集 有 GBK,UTF-8,UTF-16? 等 。 
。 expires, 设 定 网 页 的 到 期 时 间 。 一旦 网 页 过 期 ,必须 到 服务 器 上 重新 下 载 。 
例如 : < meta http-equiv 一 "expires" content 二 "Thur, 8 May 2008 18:18:18 GMT"> 
。 pragma, 禁 止 浏 览 器 从 本 地 计算 机 的 缓存 中 访问 页 面 内 容 。 
例如 : < meta http-equiv 王 "pragma”content 一 "no-cache">, 设 定 访问 者 不 能 使 用 脱 机 
浏览 功能 。 
。 refresh ,自动 刷新 并 指向 新 页 面 。 
例如 : < meta http-equiv 王 "refresh" content 二 "60; url 二 new. htm"> 
则 浏览 器 将 在 60 秒 后 ,自动 转 到 new. htm。 利 用 该 功能 ,可 以 显示 一 个 封面 提示 页 
面 , 在 若干 时 间 后 ,再 自动 转移 到 其 他 页 面 。 
如 果 不 设置 URL 项 ,浏览 器 则 刷新 本 页 ,这 就 实现 了 Web 聊天 室 定 期 自动 刷新 特性 。 
。 window-target, 强 制 页 面 在 当前 窗口 以 独立 页 面 显 示 。 
例如 : < meta http-equiv 二 "window-target” content 二 "_top">, 可 以 用 来 防止 别人 在 框 
架 里 调用 该 页 面 。 
(2) name 属性 
name 属性 主要 用 于 描述 网 页 ,与 之 对 应 的 属性 值 为 content,content 中 的 内 容 主 要 是 
便于 搜索 引擎 查找 信息 和 分 类 信息 用 的 。meta 标记 的 name 属性 语法 格式 为 : 


<meta name = "参数 名 ”content = "参数 值 "> 


name 属性 主要 有 以 下 几 种 参数 : 

。 keywords, 设 置 网 页 的 关键 字 , 用 来 告诉 搜索 引擎 该 网 页 的 关键 字 是 什么 。 

例如 : < meta name 二 "keywords" content 二 "E-learning,ontology"> 

。 description,description 用 来 告诉 搜索 引擎 网 站 的 主要 内 容 。 

例如 : < meta name 二 "description" content 二 "This page is about E-learning etc. "> 

。 author, 标 注 网 页 的 作者 。 

例如 : < meta name 二 "author" content 一 "brion(@ mail. abc. com"> 

。 robots, 告 诉 搜索 机 器 人 需要 索引 的 页 面 有 哪些 。content 的 参数 有 all ,none ,index、 

noindex ,follow .nofollow ,默认 值 为 all。 

3. < link > 标记 


在 稍微 复杂 一 点 的 工程 中 ,抽象 和 包含 始终 是 一 种 有 效 的 方法 。 例 如 ,在 软件 开发 中 ， 
我 们 定义 头 文件 ,定义 公共 函数 库 ,然后 在 其 他 文件 中 包含 (include) 或 导入 (import) 这 些 公 


@ 在 字符 编码 中 ,常用 的 有 ASCII(7 位 字符 编码 ) .扩展 ASCIT(8 位 字符 编码 ) ISOLatin-1(8 位 字符 编码 ) 和 
UNICODE 字符 编码 (16 位 字符 编码 ,ISOLatin-l 扩展 ) 。 虽 然 理 论 上 讲 ,UNICODE 字符 编码 可 以 编码 世界 上 所 有 的 语 
言 文字 ,实际 上 它 支持 的 文字 有 限 。 为 了 解决 UNICODE 字符 编码 存在 的 问题 ,出 现 了 一 种 中 间 格 式 的 字符 集 , 称 为 通 
用 转换 格式 (Unicode Transformation Format) , 即 UTF。 

常用 的 UTF 字符 编码 有 UTF-8、UTF-16 .UTF-32, 三 种 编码 的 不 同 主要 表现 在 字符 串 数据 的 存储 、 排 序 和 网 络 传 
输 上 。UTF-8 是 最 常 使 用 的 编码 方案 ,优点 是 没有 字 节 序 的 概念 ,缺点 是 在 多 个 字 节 表示 的 语言 文字 (例如 ,汉字 ) 中 , 字 
符 串 操作 麻烦 ,网 络 传输 流量 也 大 。UTF-16 是 Windows 上 默认 的 Unicode 编码 方式 ,使 用 wchar_t 表示 ,程序 中 的 字符 常量 
在 内 存 中 的 表示 由 源 程序 的 字符 编码 决定 。UTF-32 所 有 字符 采用 4 字 节 编码 ,以 英文 为 主 的 字符 串 ,UTF-32 编码 空间 大 。 


共 文 件 。 在 网 页 设计 中 ,这 样 的 思想 依然 存在 。 我 们 可 以 定义 独立 的 样式 表 文 件 (. css) ,可 
以 定义 公共 的 HTML 代码 ,保存 为 独立 的 HTML 文件 ,然后 在 需要 的 文件 中 把 它们 包含 
进去 ,而 不 是 重复 地 写 多 次 。 

在 HTML 中 ,<link > 标记 定义 了 文档 之 间 的 包含 。 在 HTML 的 头 部 可 以 包含 任意 数 
量 的 < link > 标记 ,< link > 标记 带 有 很 多 属性 ,下 面 是 一 些 常 用 的 属性 : 

(1) type, 用 于 指定 被 包含 的 文件 类 型 。 例 如 ,text/css 是 指 包含 一 个 层 释 样式 表 文 件 。 

(2) rel, 定 义 HTML 文档 和 所 要 包含 资源 之 间 的 链接 关系 ,可 能 的 取 值 很 多 ,最 为 常 
用 的 取 值 是 stylesheet, 用 于 包含 一 个 固定 首选 样式 表单 。 

(3) href ,指向 被 包含 资源 的 url 地 址 。 

例如 ,在 一 个 文档 中 要 引用 一 个 css 文件 ,在 文档 头 部 , 需 添加 下 列 标记 : 


<link type = "text/css" rel = "stylesheet" href = "mystyle. css"> 


4. < base > 标记 

在 一 个 HTML 文件 中 ,每 一 个 <a > 标记 的 href 属性 和 target 属性 都 可 以 有 一 个 基础 
的 URL 地 址 ,这 就 是 通过 文档 头 标记 中 的 < base > 标记 来 定义 的 。 设 置 了 < base > 标记 后 ， 
在 文档 中 所 有 的 相对 地 址 形式 的 URL 都 是 相对 于 这 里 定义 的 URL 而 言 的 。 一 篇 文档 中 
的 < base > 标记 不 能 多 于 一 个 ,必须 放 于 头 部 ,并 且 应 该 在 任何 包含 URL 地 址 的 语句 之 前 。 

< base > 标记 包含 如 下 属性 : 

(1) href 属性 

href 属性 , 必 选 属性 ,指定 了 文档 的 基础 URL 地 址 。 例 如 : 如 果 和 希望 将 文档 的 基础 
URL 定义 为 *http://www.abc. com”, 则 可 以 使 用 如 下 语句 : 


<base href = "http://www.abc. com"> 


当 定 义 了 基础 URL 地 址 之 后 ,文档 中 所 有 引用 的 URL 地 址 都 从 该 基础 URL 地 址 开 
始 , 例 如 ,对 于 上 面 的 语句 ,如 果 文 档 中 一 个 超级 链接 指向 gsl/ welcome. htm, 则 它 实 际 上 指 
向 的 是 如 下 URL 地 址 : http://www. abc. com/ gsl/welcome. htm。 

(2) target 属性 

在 HTML 中 ,target 属性 用 于 定义 文档 的 输出 窗口 ,例如 : <a > 标记 中 ,target 定义 了 
打开 超 链接 的 目标 窗口 ,< form > 标记 中 定义 了 服务 端 程序 的 输出 窗口 。 如 果 文 档 中 超级 
链接 没有 明确 指定 打开 页 面 的 目标 框架 , 则 就 使 用 这 里 定义 的 地 址 代替 。 

常用 的 target 的 属性 值 有 : 

。 _blank ,表明 在 新 窗口 中 打开 链接 指向 的 页 面 。 

。 _self, 在 当前 文档 的 框架 中 打开 页 面 。 

。 _parent, 在 当前 文档 的 父 窗 口中 打开 页 面 。 

。 _top ,在 链接 所 在 的 完整 窗口 中 打开 页 面 。 

例如 : < base target 一 ”blank"> 表 明 页 面 上 所 有 的 链接 都 在 新 窗口 打开 。 


3.2.3 文档 体 标 记 及 其 属性 


在 一 个 HTML 文档 中 ,在 < body >…</body > 标记 对 之 间 的 部 分 称 为 文档 体 。 文 档 体 
中 描述 的 是 浏览 器 窗口 中 显示 的 内 容 。 无 论 网 页 多 么 复杂 ,它们 都 是 由 文本 、 图 片 超 链接 等 章 
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内 容 构成 的 ,这 些 页 面 内 容 都 由 相应 的 HTML 标记 来 标记 :它们 都 是 < body > 标记 的 子 标记 。 

在 讲解 具体 文档 内 容 标记 以 前 ;我们 先 介绍 文档 体 标 记 < body >,< body > 标记 是 一 个 
非常 重要 的 标记 ,含有 大 量 的 属性 ,许多 重要 的 网 页 功能 都 是 通过 < body > 标记 的 属性 实 
现 的 。 

1. 一 般 属 性 

< body > 标记 的 一 般 属性 用 于 页 面 的 一 般 性 设置 ,< body > 标记 的 一 般 属性 很 多 ,常见 
的 一 般 属 性 见 表 3-1。 

表 3-1 < body > 标记 一 般 属性 























属 性 用 途 举 例 
text="#rrggbb" 设置 文本 颜色 的 RGB 色 值 < body text 一 " 井 {ff0000"> ,红色 文本 
bgcolor= "#7rrggbb" 设置 页 面 背景 颜色 < body bgcolor 一 "red">, 红 色 背 景 
background 设置 页 面 背景 图 片 background= "images/bgl. jpg" 
bgproperties 设置 成 fixed, 则 背景 图 案 不 滚动 | bgproperties 一 "fixed" 
topmargin,leftmargin, 设置 页 面 内 容 到 上 、 下 ,左右 边 |< body leftmargin 二 "0" topmargin 一 
bottommarigin,rightmargin | 框 的 距离 , 取 值 一 般 为 像素 数 "20px"> 


颜色 的 设置 可 以 通过 HTML 语言 所 给 定 的 颜色 常量 名 ,或 者 RGB( 红 、 绿 、 蓝 三 色 的 组 
合 ) 颜 色 设置 ,例如 "# ff0000" 表 示 红 色 。 各 个 属性 可 以 结合 使 用 ,如 : < body bgcolor 王 
"red" text 二 "#0000ff">, 设 置 网 页 的 背景 色 为 红色 (red) ,文本 为 蓝 色 ("#0000ff")。 

2. 事件 属性 

当 一 个 Web 文档 被 加 载 显示 或 者 退出 (关闭 ) , 当 进 行 移动 窗口 或 改变 文档 窗口 大 小 等 
操作 时 ,会 发 生 相 应 的 事件 ,这 些 事件 在 < body > 标记 中 通过 事件 属性 来 表达 。< body > 标 
记 常 见 事件 属性 见 表 3-2。 





表 3-2 < body > 标记 中 的 事件 属性 











事件 触发 条 件 事件 触发 条 件 
onLoad 页 面 下 载 完成 时 触发 onMouseMove 鼠标 移动 时 触发 
onUnload | 退出 页 面 时 触发 onDblClick 鼠标 双击 时 触发 
onFocus “| 页 面 窗口 获得 焦点 时 触发 | onMouseDown | 鼠标 被 按 下 时 触发 





键 被 按 下 时 触发 ,按键 的 ASCI 码 值 保存 在 
window. event. keyCode 中 

onKeyPress 键 被 按 下 然后 被 释放 时 触发 

onKeyUp 键 被 释放 时 触发 


onBlur 页 面 窗口 失去 焦点 时 触发 | onKeyDown 





onResize | 窗口 改变 大 小 时 触发 
onScroll “| 单 击 滚动 条 时 触发 














在 上 述 事件 中 ,有 些 事件 是 < body > 标记 特有 的 ,有 些 事件 可 能 存在 于 多 个 不 同 的 标 
记 中 。 

事件 属性 的 值 往往 是 一 个 JavaScript 函数 ,来 完成 Web 编程 任务 。 在 Dreamweaver 等 
工具 软件 中 ,可 以 通过 行为 面板 ,显示 一 个 标记 支持 的 行为 事件 ,并 且 可 自动 生成 简单 的 行 
为 JavaScript 代码 ,从 而 减少 用 户 书写 程序 的 工作 量 ,具体 应 用 参考 后 面 的 章节 。 

【 例 3-1】 HTML 标记 的 概念 及 认 知 。 

HTML 标记 就 是 标记 内 容 在 Web 浏览 器 中 以 特定 的 格式 显示 ,而 在 非 HTML 应 用 程 


序 中 , 则 不 能 按照 标记 的 格式 进行 显示 。 

在 Windows 中 ,用 Windows* 记 事 本 ”程序 ,或 UltraEdit@ 编辑 器 ,或 Sublime Text@ 
代码 编辑 器 等 文本 编辑 软件 或 Dreamweaver 等 网 页 制作 工具 可 以 编辑 网 页 。 例 如 ,使 用 
Sublime Text 代码 编辑 器 ,输入 下 面 HTML 标记 ,如 图 3-1 所 示 。 











[是 RN 的 村 -web 技 相合 计 语 合 716Vea3 Thtm . - Sublime Text EX 
EECEIORECETORCTTT 





s 


contenteditable 


contextmenu 


dir 








图 3-1 用 Sublime Text 代码 编辑 器 创建 HTML 文档 


与 Windows*“ 记 事 本 ”程序 相 比 ,UltraEdit 编辑 器 或 Sublime Text 代码 编辑 器 可 以 识 
别 多 种 编程 语言 ,支持 关键 字 的 高 亮 ,着色 和 自动 缩 进 功 能 。 例 如 : 在 Sublime Text 代码 编 
辑 器 ,执行 “查看 "菜单 中 的 “语法 "命令 ,可 以 选择 不 同 的 代码 语言 。 

在 编辑 窗口 输入 : 


<font color =" 井 ff000"> 您 好 </font> 


在 选择 了 HTML 后 ,HTML 编辑 支持 标记 、 标 记 属性 列表 提示 。 例 如 ,在 输入 标记 名 
称 的 过 程 中 ,伴随 着 对 应 的 标签 列表 提示 。 在 标记 名 后 ,输入 空格 ,显示 该 标记 的 属性 列表 
提示 。 这 为 HTML 代码 的 书写 带 来 很 大 方便 。 如 果 没 有 上 述 功能 , 则 需要 安装 相应 的 插件 ， 
常用 的 插件 包括 : Convert To UTF8( 将 文件 编码 从 GBK 转换 成 UTF8)、zenCoding (快速 
HTML、CSS 编写 方式 ,已 更 名 为 Emmet) JS Format(JS 代码 格式 化 插件 ) 、BracketHighlighter 
(括号 高 亮 插 件 )、ChineseLocalization( 汉 化 插件 ,支持 无 颖 切换 中 文 、 日 文 、 英 文 ) 等 。 


@ UltraEdit 是 一 套 功能 强大 的 多 文档 文本 编辑 器 ,可 以 编辑 文本 .十 六 进 制 .ASCII 码 ,内 建英 文 单字 检查 功能 。 
同时 , 它 还 是 一 款 良 好 的 程序 编辑 器 ,支持 语法 高 亮 , 代 码 折 释 和 宏 ,以 及 支持 列 模式 编辑 等 大 量 特殊 功能 ,内 置 了 对 于 
C/C++ .HTML、PHP 和 JavaScript 等 语法 的 支持 。UltraEdit 可 运行 在 Windows 平台 ,也 可 以 运行 在 Linux 平台 ,Linux 
版 本 为 UEX, 意 即 UltraEdit for Linux。 

@” ”Sublime Text 是 一 个 代码 编辑 器 ,由 程序 员 Jon Skinner 于 2008 年 1 月 研发 成 功 , 内 嵌 Python 解释 器 支持 插件 
开发 ,通过 安装 插件 ,支持 HTML、CSS、XML、JavaScript 等 流行 的 前 端 开发 语言 。Sublime Text 支持 多 种 编程 语言 的 语 
法 高 亮 、 拥 有 优秀 的 代码 自动 完成 功能 。 支 持 强大 的 多 插入 点 .多 行 选择 和 多 行 同 时 编辑 功能 。 在 界面 上 支持 多 种 布 
局 、 多 页 标签 和 代码 缩 略 图 , 右 侧 的 文件 缩 略图 滑动 条 ,可 方便 地 观察 当前 窗口 在 文件 的 哪个 位 置 。 多 页 标签 在 大 屏幕 
或 需 同时 编辑 多 文件 时 更 加 方便 。 
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Sublime Text 代码 编辑 器 具有 强大 的 编辑 功能 ,例如 : 按 住 Ctrl, 鼠 标 可 以 多 处 单 击 ， 
从 而 定义 多 个 插入 点 ,此 时 可 以 多 处 同时 插入 。 双 击 一 个 单词 ,可 以 框 选 所 有 相同 的 单词 。 
将 上 述 内 容 保 存 为 网 页 类 型 文件 exa3-1. htm, 然 后 双击 该 文档 ,文档 将 在 浏览 器 中 打 
开 , 显 示 结 果 如 图 3-2 所 示 。 








后 当 CG 日 fileVW/F/ 教 材 --Web 技 术 导论 (第 4 版 )2016/exa3-1htm 安 
您 好 





图 3-2 HTML 文档 在 浏览 器 中 显示 界面 


可 以 看 到 ,在 浏览 器 窗口 显示 红色 的 “您 好 ”, 对 比 在 记事 本 中 的 显示 ,可 见 标 记 就 是 告 
知 浏览 器 ,被 标记 的 内 容 要 以 什么 方式 来 显示 。 


3.2.4 文本 标记 


在 一 个 网 页 中 ,文本 内 容 通常 是 网 页 的 主要 内 容 ,在 HTML 规范 中 ,关于 文本 内 容 的 
标记 较 多 ,每 个 标记 都 定义 了 文本 内 容 在 浏览 器 中 的 默认 显示 样式 。 同 时 ,每 个 标记 还 有 相 
应 的 标记 属性 ,通过 设置 标记 属性 ,可 以 修改 标记 的 默认 显示 。HTML 中 有 关 文 本 内 容 的 
标记 及 属性 见 表 3-3。 


表 3-3 文本 标记 及 常用 属性 

















分 类 标 记 一 般 属 性 
align, 设 置 冲 齐 方 式 
<hl></hl>…< h6 ></h6 >, 一 级 到 六 
标题 标记 本 style, 设 置 内 联 样式 
级 标题 标记 ,对 应 的 字体 逐渐 减 小 class ,设置 样式 类 
face、size、color, 设 置 字体 、 大 小 和 颜色 
< font></font>, 字 体 标记 style, 设 置 内 联 样式 
class ,设置 样式 类 
文本 格式 标记 i 本 style, 设 置 内 联 样式 
<b></b>, 粗 体 标记 class, 设 置 样式 类 
<i></i>, 斜 体 标 记 同上 
<u></u>, 下 面 线 标记 同上 
回 车 换行 标记 | < br>, 将 输出 位 置 转 到 下 一 行 的 开始 


























续 表 
分 类 标 记 一 般 属 性 
<p></p>, 标 记 一 个 段落 ,输出 位 置 转 





lign, 世 
让 六 标记 。。 | 到 下 一 行 开始 ,输出 结束 后 增加 一 个 空 | alae 
a 行 。 要 修改 段落 内 的 行 间距 及 段 前 段 | “”、 ~ 
后 需要 使 用 CSS 属性 class ,设置 样式 类 





ee 
水 玉 绕 标 沁 “| <hi>, 刹 大 一 条 永 单 线 pn 
<! 一 注释 性 文字 ->, 用 于 在 HTML 文 
注释 标记 档 中 书写 说 明 性 文字 ,注释 文字 可 以 多 
行 ,内 容 在 浏览 器 中 不 显示 











在 HTML 中 ,虽然 不 同 标记 的 属性 不 完全 相同 ,但 有 些 属性 是 大 多 数 标记 所 共有 的 ， 
这 些 标 记 属 性 称 为 通用 属性 ,包括 : Did 属性 ,唯一 地 标识 一 个 标记 ,通常 用 于 客户 端 脚本 
程序 对 元 素 的 访问 。@name 属性 ,为 标记 命名 ,这 在 DOM 模型 中 对 应 了 标记 所 对 应 的 内 
存 对 象 , 类 似 于 内 存 变 量 名 ,以 便于 客户 端 脚本 程序 的 访问 。@style 属性 ,设置 标记 的 内 联 
样式 ,内 联 样式 是 一 个 由 CSS 样式 定义 的 样式 表 , 用 于 修改 标记 的 默认 显示 。@class 属性 ， 
设置 标记 的 样式 类 ,这 是 通过 CSS 定义 的 。 

上 述 标记 可 以 联合 使 用 ,例如 : 

<b>< font face= "宋体 " size= "3" color = "#0000FF">< i><u> 字 体 标记 一 </u></i></font ></b> 

显示 效果 为 : 

之 并 7 一 

在 网 页 中 ,我 们 经 常 看 到 一 些 滚动 显示 的 标题 新 闻 ,这 称 为 跑马 灯 , 使 用 < marquee > 标 
记 , 示 例 代码 如 下 : 

<marquee onmouseover = this. stop() onmouseout = this. start() scrollAmount = 1 scrollDelay = 60 

direction = up width= 150 height = 200> 

活动 字幕 内 容 第 一 行 <br > 

活动 字幕 内 容 第 二 行 <br > 

活动 字幕 内 容 第 三 行 <br > 


</marquee> 

上 述 代码 ,将 在 一 个 区 域内 ,垂直 地 滚动 多 行 , 鼠 标 指向 该 区 域 时 停止 滚动 ,离开 时 继续 
滚动 。 

以 下 是 几 点 说 明 : 


(1) < marquee > 标记 常用 的 属性 有 : 

。 align 属性 , 设 定 活动 字幕 的 位 置 . 取 值 可 以 是 left ,center right top 或 bottom 。 

。 bgcolor 属性 , 设 定 活动 字幕 的 背景 颜色 ,一般 是 十 六 进 制 的 RGB 色 值 。 

。 direction 属性 , 设 定 活动 字幕 的 滚动 方向 , 取 值 可 以 是 left ,right、up 或 down。 

。 behavior 属性 , 设 定 滚动 的 方式 ,主要 有 三 种 方式 : behavior 一 "scroll "表示 由 一 端 滚 
动 到 另 一 端 ; behavior 二 "slide" 表示 由 一 端 快速 滑动 到 另 一 端 , 旦 不 青 重复 ; 











电 TML 与 XML 基础 


才 ww 颈 


Web 投 大 时 论 ( 殴 4 版 ) 





behavior 一 "alternate" 表 示 在 两 端 之 间 来 回 滚动 。 

。 height 和 width 属性 , 设 定 滚动 字幕 的 高 度 和 宽度 。 

。 hspace 和 vspace 属性 , 设 定 滚动 字幕 的 左右 边框 和 上 下 边框 的 宽度 。 

。 scrollamount 属性 , 设 定 活动 字幕 的 滚动 距离 。 

。 scrolldelay 属性 ,用 于 设 定 滚 动 两 次 之 间 的 延迟 时 间 。 

。 loop 属性 ,用 于 设 定 滚 动 的 次 数 , 当 loop 一 一 1 表示 一 直 滚 动 下 去 ,直到 页 面 更 新 。 

默认 情况 下 ,< marquee > 标记 是 向 左 滚动 无 限 次 ,字幕 高 度 是 文本 高 度 ,水平 滚动 的 宽 
度 是 当前 位 置 的 宽度 ; 垂直 滚动 的 高 度 是 当前 位 置 的 高 度 。 

(2) 由 于 < mqrquee > 标记 只 能 作用 于 一 段 (<p >…</p >) 文 本 ,因此 活动 字幕 为 多 行 
时 ,分 行 时 只 能 用 < br > 标记 ,不 能 用 < p > 标记 。 

(3) 字幕 中 可 以 加 入 图 像 ,代码 如 下 : 


<marquee >< img src= "image/logo. gif" width= "20" height = "20"> 欢 迎 光 临 </marquee > 


如 果 和 希望 滚动 的 内 容 带 有 超 链接 ,可 以 将 内 容 用 < a></a > 标记 , 即 < marqee >< a href 二 
"# "> 活动 字幕 内 容 </a ></marqee>。 


3.2.5 图 像 标 记 及 影像 地 图 


在 一 个 网 页 中 ,图 片 和 文本 一 样 是 最 常见 的 网 页 内 容 之 一 。 在 HTML 中 ,图 片 由 两 种 
形式 出 现 , 一 种 是 简单 的 图 片 , 另 一 种 表现 形式 是 影像 地 图 。 

1. 图 像 标 记 < img > 

在 网 页 中 插入 一 幅 图 片 , 图 片 由 < img > 标记 , 它 是 一 个 单 标记 ,在 网 页 中 标记 一 个 图 片 
的 一 般 形式 是 : 

< img src= "图 片 的 url"> 


在 < img > 标记 中 ,src 属性 为 必 选 属性 , 它 的 取 值 为 图 片 所 在 的 路 径 和 文件 名 。 因 为 
HTML 文件 为 文本 文件 ,因此 ,< img > 标记 并 不 真正 把 图 像 嵌 入 到 HTML 文档 中 ,而 是 将 
src 属性 赋值 为 图 片 文件 所 在 的 路 径 及 文件 名 (浏览 器 显示 的 图 像 格 式 为 gif ,jpg 或 png)。 
这 也 是 在 Web 服务 器 配置 中 为 什么 要 选择 保持 HTTP 连接 的 原因 ,同时 也 是 Web 浏览 器 
在 保存 页 面 时 有 多 种 文件 保存 类 型 的 原因 。 

< img > 标记 部 分 常用 属性 及 说 明 如 下 。 

。 src: 设 定 图 片 文件 的 存放 路 径 ,采用 和 当前 页 面 保 存 位 置 的 相对 路 径 形 式 。 图 片 文 

件 须 保存 在 站 点 主 目录 下 的 某 个 文件 夹 中 。 
。id: 图 片 id 号 ,客户 端 脚本 程序 可 通过 标记 的 id 属性 值 访问 标记 所 对 应 的 内 存 
对 象 。 

。 name: 图 像 名 称 ,功能 同 id 属性 类 似 。 在 一 个 网 页 中 ,标记 的 id 属性 不 能 重 名 ,但 

标记 的 name 属性 可 以 重 名 。 

。 width 和 height: 分 别 用 于 设置 图 像 显示 的 宽度 和 高 度 , 取 值 可 以 是 像素 值 ,百分比 
或 auto。 如 果 图 片 实 际 的 宽度 和 高 度 不 同 ,浏览 器 将 对 图 片 进行 缩放 。 
border: 设置 图 片 边框 线条 属性 ,包括 线 型 . 线 宽 和 颜色 ,设置 为 0, 则 不 显示 边框 。 

。 style: 设置 标记 内 联 样式 表 。 


。 class: 设置 标记 样式 类 。 

。 title: 设置 图 像 标题 , 当 鼠 标 移 到 图 片上 时 ,在 鼠标 的 右 下 角 显 示 title 的 内 容 。 
。alt: 设置 图 片 蔡 代 文 字 ,在 浏览 器 还 没有 装 入 图像 ( 或 关闭 图 像 显 示 ) 时 ,此 图 像 位 
置 显示 蔡 代 文 字 。 一 个 网 页 除了 网 页 文件 外 ,其 他 所 包含 的 图 片 都 是 单独 的 文件 ， 
浏览 器 下 载 一 个 网 页 时 ,除了 下 载 网 页 文件 ,默认 情况 下 ,会 一 并 下 载 网 页 中 包含 的 
其 他 文件 ,例如 < img > 中 src 标记 的 图 片 文件 。 

align: 设置 图 像 的 对 齐 方式 。 除 了 常规 的 left ,right ,center 外 ,还 有 absmiddle 等 取 
值 , 它 将 影响 图 片 和 文字 混 排 时 的 对 齐 方 式 , 例 如 在 一 个 单元 格 内 (< td >) ,让 图 片 
和 文字 垂直 居中 。 

除了 上 述 的 一 般 属性 外 ,< img > 标记 还 有 大 量 的 鼠标 和 键盘 事件 属性 ,例如 onload， 
onclick,ondbclick ,onmouseover,onkeydown,onkeypress 等 。 此 外 ,在 HTML 5 中 ,为 适应 
自 适 应 网 页 设计 ,img 标记 包含 的 属性 更 加 广泛 。 

【 例 3-2】 在 一 个 网 页 中 ,插入 一 幅 图 片 1.jpg, 编 写 相 应 的 HTML 代码 ,实现 当 鼠 标 
移 到 图 片上 的 时 候 , 显 示 另 一 幅 图 片 2.jpg, 鼠 标 移 走 后 重新 显示 图 片 1. jpg。 

分 析 : 根据 题目 要 求 ,可 以 用 < img > 标记 图 片 1. jpg, 然后 设置 < img > 标记 的 
onmouseover 属性 和 onmouseonut 属性 ,来 实现 图 片 的 切换 。 设 网 页 文件 名 为 myimg. hm， 
两 幅 图 片 在 同一 文件 夹 下 ,示例 代码 如 下 : 

< html > 

<head > 

<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 

</head> 

<body> 

<img src= "1.jpg" name = "tai" title= "泰山 日 出 " 

onmouseover = "tai. src= '2. jpg'" onmouseout = "tai. src = '1. jpg'" > 

</body > 

</html > 

在 onmouseover 和 onmouseout 事件 属性 中 ,我们 为 当前 的 < img > 标记 对 应 的 内 存 对 
象 的 src 属性 赋值 ,从 而 改变 当前 显示 的 图 片 。 

2. 影像 地 图 标记 < map > </map > 

所 谓 “ 影 像 地 图 ”, 就 是 在 一 幅 图 片上 定义 若干 区 域 , 每 个 区 域 设置 一 个 超 链接 。 设 置 影 
像 地 图 ,首先 要 通过 < img > 标记 标记 一 幅 图 片 ,并 设置 <img > 的 ismap 属性 ; 然后 再 定义 相 
应 的 热点 区 域 。 使 用 影像 地 图 的 一 般 形 式 是 : 

<img src= "图 片 url" usemap = " 井 mapname”ismap > 

<map name = "mapname"> 


<area href = "url"” shape = "circle" coords = "坐标 值 " > 
<area href = "url"” shape = "rect" coords = "坐标 值 "> 





</map > 

其 中 ,< map >…</map > 为 影像 地 图 标记 ,包含 一 系列 area 子 标记 ,该 标记 可 以 在 图 像 
地 图 中 设 定 作用 区 域 ( 又 称 “ 热 点 ”) ,每 个 热点 区 域 通常 对 应 一 个 超 链接 。 热 点 的 坐标 值 由 
图 片 决 定 ,通常 需要 利用 FrontPage 等 工具 来 完成 热点 的 定义 , 详 见 第 4 章 的 介绍 。 
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3.2.6 超 链 接 与 书签 


在 网 页 中 ,所 谓 超 链接 ,就 是 在 一 个 HTML 文档 的 一 段 文本 或 者 一 个 图 片 对 象 上 建立 
的 到 自身 或 男 一 个 目标 对 象 的 链接 关系 ,这 个 目标 对 象 可 以 是 一 个 网 页 、 某 种 类 型 的 文档 或 
一 个 应 用 程序 等 。 建 立 了 超 链接 关系 的 对 象 将 以 特定 的 方式 (例如 : 手 形 或 下 面 线 等 ) 显 
示 , 当 浏览 者 单 击 建立 了 链接 的 文字 或 图 片 时 ,根据 链接 目标 的 文件 类 型 ,链接 关系 所 指定 
的 链接 目标 将 在 浏览 器 窗口 打开 显示 .或 提示 用 户 下 载 或 运行 。 根 据 链接 对 象 不 同 , 超 链接 
分 为 外 部 超 链 接 和 内 部 超 链接 两 种 ,外 部 超 链 接 是 一 个 页 面 到 另 一 个 页 面 的 链接 ,内 部 超 链 
接 则 是 在 一 个 页 面 内 书签 之 间 的 跳 转 。 在 HTML 中 , 超 链 接 和 书签 都 通过 < a ></a > 标记 
来 定义 。 

1. 定义 超 链 接 

在 HTML 中 , 超 链接 通过 < a ></a > 标记 来 定义 ,根据 标记 的 内 容 不 同 , 超 链接 分 为 文 
本 超 链接 和 图 像 超 链接 两 种 。 

定义 文本 超 链接 的 一 般 格 式 为 : 


<a href = "url# bookmark"> 文 本 </a> 
如 果 是 在 图 片上 建立 超 链 接 ,一 般 形式 为 : 


<a href =" url# bookmark">< img src= "imge -url"></a> 


在 默认 情况 下 , 当 鼠 标 移 到 建立 了 超 链接 的 文本 或 图 片上 方 时 ,鼠标 变 成 手 形 电 ,表示 
文本 或 图 片 对 应 一 个 超 链接 。 

下 面 介绍 <a > 标记 的 主要 属性 及 功能 。 

(1) href 属性 ,设置 被 链接 目标 的 url 地 址 。 一 般 形 式 是 : 


href = "[url][ # bookmark][?para= value&para = value…]" 


在 上 述 href 取 值 中 ,每 一 部 分 都 是 可 选项 。 其 中 ,url 为 一 个 网 址 ,可 以 省 略 , 若 省 略 则 
代表 是 当前 页 面 。bookmark 是 书签 名 ,指定 打开 一 个 网 页 的 时 候 ,定位 到 特定 的 书签 位 
置 。 间 号 (*?”) 后 面 为 参数 名 /参数 值 对 列表 ,不 同 的 参数 名 /参数 值 对 之 间 用 “&.” 分 隔 。 

在 实际 应 用 中 ,除了 可 以 设置 一 个 完整 的 网 址 外 ,href 可 以 有 多 种 特殊 的 形式 ,例如 ， 

。 href 二 "#" ,表示 当前 页 ,这 通常 和 onclick 属性 联合 使 用 。 

。 href 二 "# bookmark" , 则 定位 到 当前 文档 的 bookmark 书签 位 置 及 内 部 超 链接 。 

。 href 二"", 则 定义 一 个 空 超 链 接 , 即 不 指向 任何 超 链 接 位 置 。 

。 href 二 "javascript 代码 " ,例如 : <a href 二 "javascript:windows. alert('hi)"> 下 一 步 

</a>, 则 当 单 击 超 链接 文本 时 ,执行 href 属性 中 设置 的 JavaScript 代码 。 

(2) target 属性 ,设置 单 击 超 链 接 时 打开 新 文档 的 目标 窗口 。 如 果 不 设置 该 属性 , 则 默 
认 的 目标 窗口 是 当前 窗口 。 设 置 target 属性 的 一 般 形 式 是 target 王 "window-name"， 
window-name 可 以 取 常 量 :_self( 相 同 框架 ) .blank( 新 建 窗 口 ) ，top( 整 页 ) ，parent( 父 窗 
口 ) ,或 者 是 一 个 存在 的 帧 名 (frame 或 iframe) 。 

(3) title 属性 ,属性 值 为 一 字符 串 ,鼠标 指向 超 链 接 时 ,鼠标 右 下 角 显 示 标 题 文本 。 

通过 title 和 href 二"" 空 超 链接 属性 结合 ,可 以 产生 特定 的 效果 。 对 尚未 完成 的 超 链接 


显示 一 个 提示 信息 , 当 超 链接 页 面 完 成 后 ,再 给 href 属性 赋 具 体 的 url 值 .例如 : 


<a href ="" title= "is building now… "> 学 习 论 坛 </a> 


如 果 在 提示 信息 中 ,需要 换行 ,可 以 使 用 “& #13;” 或 “&#10;” 来 完成 换行 输出 ,例如 : 
title= "提示 : &# 13; 来 宾 无 此 权限 ” 


(4) onclick 属性 ,接受 鼠标 单 击 .如果 返 回 true, 则 页 面 跳 转 到 href 指定 的 网 页 ,否则 ， 
不 执行 href 属性 所 设置 的 目标 网 页 。 

例如 : 

<a href ="#" onclick = " window. opener = null;window. close( ) "> 关闭 </a> 


<a href ="1. htm" onclick = "window.alert('111'); return(true)"> 111 </a> 
<a href = "2. htm" onclick = "window.alert('222'); return(false)"> 222 </a> 


对 于 上 述 三 个 超 链接 ,在 浏览 器 中 打开 ,分 别 单 击 , 查 看 它们 的 功能 和 差异 ,特别 是 当 一 
个 超 链接 同时 设置 了 href 属性 和 onclick 属性 时 , 当 用 户 单 击 超 链 接 时 ,浏览 器 是 如 何 执行 
单 击 超 链 接 操作 的 。 

(5) disabled 属性 ,开关 属性 ,无 须 赋值 。 设 置 超 链接 显示 灰 化 ,不 可 用 。 

2. 定义 书签 

在 日 常 阅读 中 ,我 们 都 了 解 书 签 的 概念 ,就 是 在 图 书 的 某 个 页 面 放 一 个 书签 ,便于 我 们 
下 次 阅读 时 直接 定位 。 在 网 页 浏览 中 ,书签 的 概念 类 似 。 在 一 个 网 页 中 ,我 们 可 以 在 不 同 的 
地 方 定义 书签 ,便于 快速 定位 ,在 一 个 网 页 中 可 以 设置 一 个 或 多 个 书签 。 

在 HTML 中 ,网 页 中 的 书签 是 通过 < a > 标记 来 定义 的 ,不 同 于 超 链 接 的 定义 ,书签 是 
通过 < a > 标记 的 name 属性 定义 的 ,定义 一 个 书签 的 一 般 形式 是 : 


<a name = "bookmark - name"> 书 签 文本 </a> 


上 述 标记 中 ,在 书签 文本 上 定义 一 个 名 字 为 bookmarkname 的 书签 ,书签 必须 是 一 个 全 
文 唯一 的 标记 串 。 书 签 文本 也 可 以 是 空 的 ,也 就 是 说 ,书签 只 是 定义 在 文档 的 某 个 位 置 ,而 
不 在 于 这 个 位 置 上 的 内 容 。 有 了 书签 后 ,< a > 标记 的 href 属性 除了 指向 一 个 网 址 外 ,还 可 
以 定位 到 网 页 内 一 个 具体 的 书签 ,用 法 是 href 一 "url# bookmark-name" ,如 果 是 同一 个 页 
内 ,可 以 写成 href 二 "#bookmark-name", 同 一 网 页 内 书签 名 不 能 重 名 。 

【 例 3-3】〗 有 两 个 网 页 pl. htm 和 p2. htm, 要 求 在 pl 中 建立 一 个 超 链接 以 链接 到 网 页 
p2. htm,p2. htm 中 有 两 个 超 链接 ,一 个 返回 pl. htm ,一 个 关闭 p2. htm 页 面 。 

下 述 是 两 个 网 页 的 代码 清单 : 

代码 清单 : pl. htm 

<html> 

<head> 

<meta http - equiv= "Content - Type”" content = "text/html; charset = gb2312"> 

</head > 

<body> 

<p><a href = "p2. htm" target ="”self"> 在 当前 窗口 打开 网 页 2</a></p> 

</body > 

</html > 
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代码 清单 : p2. htm 


<html> 

<head> 

<meta http - equiv= "Content - Type" content = "text/html; charset = gb2312"> 
</head> 

<body> 

<p> 

<a href ="#" onclick= "history.go( -1);return false; "> 返回 </a> 

</p> 

<a href ="#" onclick = "window. opener = null;window. close( )"> 关 闭 </a> 
</body > 

</html > 


上 述 代码 清单 演示 了 < a > 标记 的 多 种 灵活 用 法 ,特别 是 当 同 时 设置 了 href 属性 和 
onclick 属性 时 ,鼠标 单 击 操作 的 执行 流程 与 onclick 的 返回 值 有 关 。 还 有 ,对 于 href 二 "#", 单 
击 超 链 接 即 意味 着 刷新 当前 页 面 , 要 避免 页 面 刷 新 ,可 在 onclick 属性 中 添加 语句 return 


false。 
3.2.7 表格 


在 日 常 工作 和 生活 中 ,表格 (table) 是 一 种 常见 的 数据 组 织 和 展示 方式 ,由 行列 构成 。 
在 HTML 中 ,表格 不 仅 可 以 用 于 数据 的 组 织 和 展示 ,表格 还 是 进行 页 面 布局 的 重要 工具 。 
根据 表格 的 定义 ,使 用 表格 不 仅 可 以 很 好 地 定位 文本 或 图 像 的 显示 位 置 ,而 且 还 可 以 对 单元 
格 进行 背景 和 前 景 颜色 的 设置 ,以 产生 丰富 的 页 面 效果 。 

在 HTML 中 ,表格 是 由 < table ></table > 标记 对 创建 的 ,每 个 <table ></table > 标记 对 
之 间 包 含 若干 < tr ></tr >, 一 个 < tr ></tr > 定义 表格 中 的 一 行 。 每 一 个 < tr ></tr > 标记 对 
又 包括 若干 个 < td ></td > 标记 对 ,每 一 对 < td ></td > 标记 行内 的 一 个 单元 格 。 表 格 中 每 一 
行 所 包含 的 单元 格 数量 不 一 定 相同 ,每 一 行 中 单元 格 的 数量 及 对 齐 方式 由 实际 需要 确定 。 

从 表格 结构 的 角度 ,还 可 以 将 表格 分 隔 成 三 个 部 分 , 即 表 头 正文 和 脚注 ,分 别 用 
< thead >、< tbody > 和 < tfoot > 来 标记 ,它们 都 是 由 表格 行 构成 的 。 一 个 表格 中 可 以 包括 多 
个 < tbody >, 通 过 对 < tbody ></tbody > 标记 的 操作 ,可 以 灵活 控制 表格 中 部 分 行 的 显示 与 
隐藏 。 

表格 标记 、 行 标记 ,单元 格 标记 、 表 主体 标记 (< tbody >) 及 常见 属性 见 表 3-4。 

表 3-4 表格 , 行 及 单元 格 等 标记 属性 列表 
标 记 功能 及 常用 属性 

width .height 设置 表格 的 宽度 和 高 度 ,可 以 是 像素 值 , 如 width 二 "200", 或 窗口 总 宽度 
的 百分比 ,如 width="80% "或 auto 
表格 标记 border, 设 置 表格 边框 的 宽度 ,边框 宽度 默认 值 为 0, 即 无 边框 ,无 表格 线 。bordercolor， 
<table> 设置 边框 的 颜色 
cellspacing ,设置 单元 格 间距 , 即 单元 格 之 间 空 间 的 大 小 , 缺 省 值 是 2 
cellpadding ,设置 衬 距 , 即 单元 格 内 部 内 容 之 间 与 边框 的 距离 

















表格 标题 标记 


< caption > 


在 表格 的 上 部 显示 一 行 标题 行 .默认 居中 








续 表 

















标记 功能 及 常用 属性 

个 酉 训 | 标记 表格 的 一 行 ,可 包含 多 个 单元 格 ,hight, 设 置 行 高 
列 标题 单元 

ee 每 一 列 的 第 一 行 , 即 表 头 单元 格 

首届 民间 | "Mh 设置 弟 元 榜 宽 度 

中。 colspan 设置 一 个 单元 格 跨 占 的 列 数 ;rowspan, 设 置 一 个 单元 格 跨 占 的 行 数 


nowrap, 禁 止 单元 格 内 内 容 自 动 换行 
表 主 体 标记 | 可 以 将 若干 行 定义 为 一 个 < tbody >, 每 个 tbody 由 若干 行 构成 。 一 个 表格 可 以 定义 多 个 
<tbody> <tbody>, 通 过 脚本 程序 可 以 控制 它们 的 显示 和 隐藏 








在 HTML 中 ,要 对 表格 进行 更 加 精细 的 设置 ,可 以 使 用 标记 的 style 样式 属性 或 class 
样式 类 ,定义 CSS 样式 表 来 实现 ,详细 设置 参见 3. 3 节 的 CSS 技术 。 

【 例 3-4】 定义 一 个 高 宽 为 300 像素 X200 像素 的 3X2 的 表格 ,要 求 其 在 页 面 中 水 平 
和 垂直 方向 居中 显示 。 

分 析 : 要 修改 标记 的 默认 显示 ,通常 是 通过 为 标记 属性 赋值 来 实现 的 。 表 格 的 水 平 居 
中 容易 做 到 ,只 要 设置 < table > 的 align 一 "center" 即 可 ,但 垂直 方向 的 居中 , 则 没有 合适 的 
属性 设置 。 为 此 ,可 以 使 用 表格 髓 套 , 首 先 定义 一 个 1X1 表格 ,设置 它 的 width 和 height 属 
性 均 为 *100%”, 然 后 在 这 个 唯一 的 单元 格 内 定义 所 要 的 3X2 表格 ,并 设 定 该 单元 格 的 
align 属性 为 center。 示 例 代码 如 下 : 


<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 
</head> 
<body> 
<table width= "100%" height = "100% " border = "0" > 
<tr> 
<tdalign= "center"> 
<table id = "tablel" width= "300" height = "200" border = "1"> 
<tr height = "50"> 
<td width= "100"> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</body > 
</html > 


在 定义 表格 时 ,如 果 使 用 FrontPage 等 页 面 制作 工具 .生成 的 表格 属性 设置 很 乱 . 往 往 
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还 包含 许多 元 余 代码 ,此 时 应 该 对 代码 进行 手工 调整 ,一般 设置 应 该 是 : 

(1) 为 避免 因 浏览 器 窗口 大 小 改变 而 影响 表格 显示 ,一 般 要 设置 表格 的 宽度 为 绝对 像 
素 值 ,而 不 是 比例 ,例如 可 设置 width 一 "300" ,而 不 是 “85%”。 

(2) 行 的 高 度 设置 应 在 < tr > 标记 中 ,设置 height 属性 ,而 不 要 在 每 个 单元 格 标记 < td > 
中 设置 height 属性 。 

(3) 单元 格 一 般 需 设置 width 属性 ,如 果 有 多 个 单元 格 ,一 般 要 有 一 个 单元 格 不 设置 
width 属性 。 因 为 ,如 果 各 个 单元 格 宽度 的 和 不 等 于 表格 宽度 时 ,各 单元 格 的 实际 宽度 将 按 
照 比例 放大 和 缩小 ,不 便于 单元 格 宽度 的 调整 。 

如 果 有 多 行 , 只 需要 在 第 一 行 设置 单元 格 宽度 ,后 续 行 将 按照 第 一 行 的 宽度 ,不 需要 每 
一 行 都 设置 单元 格 宽度 。 

【 例 3-5】 使 用 < tbody > 标记 ,设计 一 个 具有 标签 功能 的 表格 。 即 设 有 两 个 标签 , 当 鼠 
标 移 动 到 第 一 个 标签 上 时 显示 部 分 行 ,移动 到 第 二 个 标签 时 ,显示 另外 若干 行 。 

分 析 : 上 述 页 面 是 我 们 在 互联 网 上 经 常 看 到 的 页 面 功能 ,从 题目 看 这 是 一 个 具有 交互 
功能 的 页 面 ,通常 需要 客户 端 脚本 程序 实现 。 在 没有 学 习 JavaScript 以 前 ,我 们 先 给 出 实现 
代码 ,主要 是 让 大 家 体会 表格 中 < tbody > 标记 的 应 用 。 

代码 清单 如 下 : 


<html > 
<head > 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 
< style type = "text/css"> 
. label - normal 
上 
background - image:url('images/labelbgnormal.gif'); 
cursor: hand; 
font — size:13px; 
color: #000000; 
text - align:center 
} 
.label - select 
{ 
background — image:url( 'images/labelbgseclet. gif'); 
cursor: hand; 
font — size:13px; 
color: #FF0000; 
font — weight: bold; 
text ~ align:center 
} 
</style> 
< script language = "javascript"> 
// 显 示 第 n 个 选项 卡 对 应 的 tbody, 同时 隐藏 其 他 tbody 的 显示 
function labelcard(tableid,numcard) 
{ 
// 通 过 表格 id 获取 表格 内 存 对 象 ,有 些 浏览 器 不 支持 直接 使 用 元 素 id 操作 对 象 
tableobj = document. getElementById(tableid); 
for(i=0;i<tableobj.rows[0].cells. length; i++) 


tableobj. rows[0]. cells[i].className = "label ~- normal"; 

tableobj. rows[0].cells[numcard]. className = "label - select"; 

// 显 示 tbody 

for(i=0;i<tablel.tBodies. length; i++) 

tablel. tBodies[i]. style. display = "none"; 

tablel. tBodies[numcard]. style. display = "block"; 
} 
</script > 
</head> 
<body> 
<table id= "labeltable" border = "0" cellspacing = "0" cellpadding = "0"> 
<tr height = 25> 

<td width= "130" class = "label - select" onmouseover = "labelcard ('labeltable', 0)" > 排行 
榜 </td> 

<td width= "130" class = "label - normal" onmouseover = "labelcard ('labeltable', 1)" > 贡献 
度 </td> 

<td width= "130" class = "label - normal" onmouseover = "labelcard ('labeltable', 2)" > 其 他 
</td> 
</tr> 
</table> 
<table id= "tablel" width= "100%" border = 
<tbody> 
<tr height = 30> 

<td width= "20" align = "center">< img src = "images/square01. gif"></td> 

<td><a href = "../lanmul - news/news01.htm"> 教 育 部 "十 二 五 "本 科教 学 工程 </a></td> 
</tr> 
<tr height = 

<td colspan = 2 background = "images/line01.gif"></td> 
</tr> 
<tr height = 30 > 





0" cellspacing= "0" cellpadding= "0" > 


nln> 





<td align = "center">< img src = "images/square01. gif"></td> 
<td><a href = "../lanmul - news/news02.htm"> 全 校 核心 通 识 课程 建设 项 目 公布 </a></td> 
</tr> 
</tbody > 
<tbody style= "display:none;"> 
<tr height = 30> 
<tdalign= "center">< img src = "images/square01. gif"></td> 
<td><a href = "../lanmu2 - news/news01.htm"> GSL5.0 系统 上 线 预 告 </a></td> 
</tr> 
<tr> 
<tdalign= "center">< img src = "images/square01.gif"></td> 
<td><a href = "../lanmu2 - news/news02.htm"> GSL 过 程 管理 问题 答疑 ... </a></td> 
</tr> 
</tbody > 
</table> 
</body > 
</html > 
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在 浏览 器 上 打开 上 述 页 面 ,显示 结果 如 图 3-3 所 示 。 











图 3-3 标签 式 网 页 的 显示 效果 


上 述 页 面 涉 及 JavaScript 脚本 程序 对 表格 数据 的 操作 。 需 要 说 明 的 是 ,不 同 的 浏览 器 
对 脚本 程序 的 支持 不 完全 一 样 , 因 此 , 当 网 页 中 包含 脚本 程序 时 ,对 网 页 应 该 多 使 用 几 个 不 
同 的 浏览 器 进行 测试 ,例如 ,分 别 测试 网 页 在 下 .Chrome 等 浏览 器 中 的 显示 情况 。 此 外 ,在 
JavaScript 中 ,有 些 属性 不 区 分 大 小 写 , 有 些 属性 却 识别 大 小 写 ,在 写 代码 和 进行 程序 调试 
时 需 注意 。 


3.2.8 表单 


在 传统 应 用 软件 中 ,用 户 输 入 通常 是 通过 对 话 框 完成 的 。 在 Web 应 用 中 ,用 户 输入 通 
常 通过 网 页 中 的 表单 来 填写 。 所 谓 表 单 (form) ,就 是 在 Web 网 页 中 用 来 给 浏览 者 填写 信 
息 ,从 而 能 获得 用 户 输入 数据 的 手段 ,表单 由 一 系列 输入 域 构成 。 当 用 户 填 写 完 信息 后 单 击 
“提交 (submit) ”按钮 ,表单 内 容 将 从 客户 端的 浏览 器 发 送 到 Web 服务 器 ,此 时 ,表单 中 所 设 
定 的 Web 服务 端 脚 本 处 理 程序 被 激活 ,来 处 理 用 户 表单 发 送 来 的 数据 。 
在 HTML 中 ,表单 用 < form ></form > 标记 ,表单 中 包含 了 多 种 不 同 的 输入 域 , 分 别 由 
相应 的 标记 进行 标记 。 表 单 标记 、 常 用 输入 元 素 标记 、 常 用 属性 及 用 法 见 表 3-5。 
表 3-5 “表单 标记 、 常 用 的 输入 元 素 标记 、 常 用 属性 及 用 法 





输入 类 型 /标记 一 般 形 式 常用 属性 

name 属性 ,表单 名 称 , 用 于 脚本 编程 。 

method 属性 ,定义 服务 器 表单 处 理 程序 从 表单 中 
- < form name =" form— name"> 
表单 标记 本 获得 信息 的 方式 , 取 值 为 get 或 post。 
< form > action 属性 ,设置 表单 处 理 程序 的 网 络 路 径 和 程 
</form > 
序 名 。 
target 属性 ,设置 action 页 面 输出 的 窗口 











续 表 
































输入 类 型 /标记 一 般 形 式 常用 属性 
type 属性 ,设置 输入 域 的 类 型 。 
name 属性 ,设置 输入 域名 字 。 
maxlength 属性 ,maxlength 是 文本 框 中 输入 的 有 
效 数据 长 度 
密码 文本 框 输入 |< input type = "password" …> 同上 
< textarea name ="" .…> name 属性 ,设置 输入 域名 字 。 
多 行文 本 框 输入 | input text rows 属性 和 cols 属性 ,分 别 用 来 设置 文本 框 的 列 
</textarea > 数 和 行 数 , 列 与 行 以 字符 数 为 单位 
button 按钮 < input type= "button" .> name 属性 ,设置 输入 域名 字 ” 
value 属性 ,value 为 按钮 的 显示 名 称 
name 属性 , 单 选 按钮 名 称 ,一 般 是 若干 个 radio 一 
组 , 取 相 同 的 name, 构 成 一 组 。 
radio 单 选 按钮 ”|< input type= "radio" …> 文 本 value 属性 ,存储 单 选 按钮 的 取 值 ,多 个 具有 相同 
name 的 单 选 按钮 应 该 具有 不 同 的 value。 
checked 属性 ,设置 该 单 选 按钮 缺 省 时 是 否 被 选中 
复 选 框 < input type = "checkbox" …> ee 下 
name 属性 ,设置 输入 域名 字 。 
size 属性 ,下 拉 式 列表 的 高 度 , 缺 省 值 为 1, 显示 弹 
ed et A 出 式 的 列表 框 。 若 设置 size 的 值 大 于 1, 则 不 会 有 
PopUp 效果 。 如 果 size 小 于 可 选 的 项 目 数量 , 则 
< option value = "">…</option> 
复 选 列表 框 。 。 |<option value= ">.…</option> | 出现 垂直 滚动 条 。 a 
<option> 标 记 用 来 指定 列表 框 中 的 一 个 选项 ， 
ie value 属性 用 来 给 < option > 指定 的 那 一 个 选项 赋 
值 ,这 个 值 将 传送 到 服务 器 ,服务 器 通过 调用 < 
select > 标记 的 name 的 value 属性 来 获得 该 区 域 
选中 的 数据 项 。selected 属性 ,用 来 指定 默认 选项 
类 似 于 单行 文本 框 ,但 在 网 页 上 不 显示 ,不 需要 用 
有 = a ,i 人 
隐藏 元 素 < input type = "hidden”…> ee sg 
value 属性 ,存储 文本 框 的 取 值 
name 属性 ,设置 输入 域名 字 。 
size 属性 ,显示 文本 框 长 度 。 


文件 上 传 标记 


< input type= "file”…> 


accept 属性 ,设置 上 载 文件 过 滤 , 即 单 击 “ 浏 览 ? 按 
钮 时 ,只 显示 指定 类 型 的 文件 列表 














将 表单 内 容 发 送 到 服务 器 端 。 
value 属性 ,提交 按钮 的 显示 名 字 ,一般 为 “确定 ” 
表单 提交 < input type= "submit".…> “提交 ”等 易于 理解 的 名 字 。 
onclick 属性 ,设置 表单 提交 前 的 处 理 函 数 , 通 常 
进行 表单 输入 有 效 性 验证 
重 填 按 钮 < input type= "reset" …> 将 表单 中 已 做 的 输入 和 选择 全 部 清除 ,重新 填写 
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对 于 上 述 表 单 及 输入 标记 ,说 明 如 下 : 

(1) 每 个 输入 元 素 都 具有 name 属性 和 value 属性 ,这 是 因为 在 浏览 器 打开 一 个 HTML 
文档 时 ,在 浏览 器 按照 标记 对 内 容 进 行 显示 的 同时 ,浏览 器 还 在 内 存 中 创建 一 个 HTML 
DOM 树 ,对 每 个 标记 创建 一 个 对 应 的 DOM 对 象 ,标记 的 一 般 属性 即 为 对 象 属性 ,事件 属性 
则 为 对 象 的 方法 。 在 输入 域 中 设置 标记 的 name 属性 , 即 是 内 存 对 象 的 名 称 , 脚 本 程序 可 以 
通过 对 象 名 称 访问 和 操作 标记 对 应 的 内 存 对 象 , 从 而 实现 对 网 页 元 素 的 操作 。 

(2) form 标记 的 method 属性 ,决定 客户 端 和 服务 端的 HTTP 通信 中 表单 数据 的 传输 
方式 ,也 决定 了 服务 端 获 取 表 单 输入 数据 的 方法 。 通 常 有 两 种 方法 : 

。 get 方 法 ,将 数据 打包 放置 在 环境 变量 QUERY_STRING 中 作为 URL 整体 的 一 部 

分 传递 给 服务 器 。QUERY_STRING 变量 可 存储 的 量 是 有 限 的 ,一 般 限 制 在 1KB 
以 下 。 

。 post 方法 ,通过 HTTP 的 实体 头 域 传递 数据 到 Web 服务 器 ,没有 数量 限制 ,是 发 送 

表达 数据 的 默认 方法 。 

(3) 如 果 表 单 中 file 类 型 输入 ,为 了 实现 通过 HTTP 协议 上 传 文件 ,在 表单 标记 < form > 
中 需要 加 入 编码 方案 属性 enctype 一 "multipart/form-data" 。 该 编码 方案 在 传送 大 量 数据 
时 比 缺 省 的 表单 编码 方案 “application/x-url-encoded” 效 率 更 高 。 因 为 URL 编码 只 有 很 有 
限 的 字符 集 , 当 使 用 任何 超出 字符 集 的 字符 时 ,必须 用 "%nn" 代 蔡 Cnn 表示 两 个 十 进 制 数 )， 
因此 ,通过 URL 编码 方式 上 载 的 文件 大 小 将 是 原来 的 2 一 3 倍 。 

例如 ,有 如 下 代码 : 


< form name = "myform" method = "POST" action = "/custom/feedback. jsp" enctype = "multipart/ 
form— data"> 

提交 论文 : <input type 一 "file" name 二 "Fl1" size 二 "20"> 

</form > 

显示 结果 为 : 

提交 论文 [as 


用 户 单 击 "浏览 "按钮 ,选择 要 提交 的 文件 ,文件 将 被 上 传 到 Web 服务 器 。 因 为 安全 的 
原因 ,在 HTML 中 ,不 能 设置 上 传 文件 在 服务 器 上 的 存储 路 径 。 上 传 文件 的 存储 路 径 是 在 
表单 处 理 程序 中 设置 的 ,在 Web 服务 器 端 ,通过 组 件 , 来 设置 每 一 个 <input type 一 "file"> 上 
传 文件 的 存储 路 径 。 一 个 HTML 表单 可 以 设置 多 个 < input type= "file"> 控 件 , 从 而 一 次 
上 传 多 个 文件 到 Web 服务 器 。 

【 例 3-6】 设计 一 个 个 人 信息 登记 表 页 面 ,要 求 输入 个 人 姓名 、 性 别 、 出 生日 期 ,教育 程 
度 , 工 作 单位 ,单位 地 址 ,电话 ,邮箱 ,个 人 简介 ,以 及 上 传 个 人 照片 等 信息 。 

分 析 : 个 人 信息 登记 页 面 应 由 表单 来 实现 ,同时 需要 使 用 表格 进行 页 面 布局 。 设 计 的 
页 面 如 图 3-4 所 示 。 








疆 名: 厂 一 性 别 ，e 男 c 女 出生 期 ， 四 10F07 。 | 刷 育 程度 ,下 和 本 
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全 郝 爱好 ， 广 运动 厂 音乐 厂 其 他 
不 A 简 人 | 











Es 人 ABH | 
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图 3-4 个 人 信息 登记 表 页 面 设 计 








代码 清单 : myinfo. htm 


< html > 
<head > 
<meta http - equiv = "Content - TYpe"” content = "text/htm1; charset = gb2312"> 
</head > 
<body > 
< form name = "forml" method = "POST" action = "myinfo - add. jsp" enctype = "multipart/fornm — 
data"> 
<table id= "tablel" width= "600" border = "1" > 
<tr height = "35"> 
<td width= "160"> 姓 名 : < input type = "text" name = "myname" size= "14"></td> 
<td width= "150"> 性 别 : < input type = "radio" value = "sex" name = "male" checked > 男 < input 
type= "radio" name = "sex" value = "female"> 女 
</td> 
<td width= "170"> 出 生日 期 : < input type = "text" name = "birthday" value = "2010 一 01-01" 
size= "10"> 
</td> 
<td> 教 育 程度 : 
< select size= "1" name = "degree"> 
< option value = "college"> 本 科 </option > 
< option value = "master"> 硕 士 </option> 
< option value = "doctor"> 博 士 </option> 
< option value = "other"> 其 他 </option> 
</select> 
</td> 
</tr> 
<tr height = "35"> 
<td colspan = "2"> 电 话 : < input type = "text" name= "tel" size = "35"></td> 
<td colspan = "2"> 邮 箱 : < input type = "text" name = "email" size= "37"></td> 
</tr> 
<tr height = "35"> 
< td colspan = "4"> 兴 趣 爱 好 : < input type = "checkbox" name = "interesting" value = "sports"> 运 
动 < input type = "checkbox" name = "interesting" value = "music"> 音 乐 < input type = "checkbox" 
name = "interesting" value = "other"> 其 他 
</td> 
</tr> 
<tr height = "120"> 
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<td colspan = "4"> 个 人 简介 < br >< textarea rows = "6" name = "brief" cols = "92"></textarea> 
</td> 
</tr> 
<tr height = "30"> 
<td colspan= "4"> 上 传 个 人 照片 < input type = "file" name = "F1" size= "65"></td> 
try 
<tr height = "35"> 
<td colspan= "4" align = "center">< input type = " submit” value = "提交 " name = "Bl1"> 
Snbsp; Snbsp; < input type = "reset" value = " 重 置 " name = "B2"> 
</td> 
</tr> 
</table> 
</form> 
</body > 
</html > 
通过 上 面 的 例子 ,可 以 看 出 几 点 : 不 是 所 有 的 form 表单 都 需要 提交 到 Web 服务 器 
处 理 , 即 可 以 没有 action 属性 。 四 如 果 是 用 Frontpage 的 table 进行 页 面 制 作 , 在 单元 格 中 
插入 form 表单 控件 时 ,生成 的 HTML 代码 比较 混乱 ,甚至 会 出 现 多 个 form, 此 时 ,要 手工 
调整 HTML 代码 ,只 要 将 所 有 的 输入 控件 包含 在 < form >…</form > 标记 对 之 间 就 可 以 


了 。@ 在 < form > 标记 的 前 后 会 产生 空 行 ,通常 将 < form > 标记 放 在 < table > 标记 的 外 面 。 
3.2.9 有 和 脚本 程序 标记 


在 计算 机 程序 的 概念 中 ,传统 的 程序 是 在 计算 机 操作 系统 上 运行 的 计算 机 指令 序列 。 
所 谓 脚本 程序 是 指 那些 不 需要 编译 ,可 以 直接 在 一 些 运 行 容器 中 ,通过 解释 引擎 解释 执行 的 
程序 。 在 Web 中 ,脚本 程序 可 分 为 客户 端 脚 本 程序 和 服务 端 脚本 程序 两 大 类 。 

所 谓 客户 端 脚本 程序 ,是 指 在 客户 端 浏览 器 中 执行 的 脚本 程序 。 最 早 的 脚本 程序 语言 
是 JavaScript 编程 语言 , 它 是 网 景 公 司 于 1995 年 在 导航 者 (Navigator) 浏 览 器 上 实现 的 ,其 
解释 器 JavaScript 引擎 是 Navigator 浏览 器 的 一 部 分 。 微 软 为 了 竞争 的 需要 ,1996 年 8 月 ， 
随 Internet Explorer 3. 0 一 起 ,推出 了 JScript 活动 脚本 程序 语言 。 两 者 语法 上 相似 ,没有 
本 质 的 区 别 。 

在 HTML 文档 中 ,客户 端 脚本 程序 需要 在 < script > 标记 内 书写 ,一 般 形 式 是 : 

< Script language = ""> 

脚本 程序 代码 

</script > 

属性 language 用 于 设置 脚本 程序 语言 ,通常 的 取 值 是 language 一 "JavaScript "或 
language 二 "JScript" ,表明 脚本 程序 是 用 JavaScript 语言 编写 的 。 客 户 端 脚本 程序 的 函数 
定义 通常 写 在 文件 头 内 ,程序 语句 则 可 以 在 文档 体 中 直接 书写 。 

所 谓 服务 端 脚 本 程序 ,是 指 在 Web 服务 器 端 运行 的 脚本 程序 ,不 同 的 Web 服务 器 可 运 
行 的 脚本 程序 语言 不 同 , 例 如 IIS 中 内 置 ASP 引擎 ,可 运行 ASP 服务 端 脚 本 程序 ,Apache/ 
Tomcat 服务 器 可 运行 JSP 服务 端 脚本 程序 。 在 HTML 文档 中 ,服务 端 脚本 程序 需要 写 在 
<%%.…%%> 标 记 内 。 当 用 户 浏览 一 个 服务 器 页 面 时 ,页 面 首 先 被 发 送 给 服务 端 脚本 引擎 , 执 
行 页 面 中 的 服务 端 脚本 程序 ,然后 将 执行 结果 页 面 返回 给 客户 浏览 器 。 


3.2.10 浏览 器 窗口 与 由 


在 网 页 浏览 时 ,我 们 在 浏览 器 地 址 栏 输入 一 个 网 址 ,或 单 击 一 个 超 链 接 打开 一 个 网 页 
时 ,Web 服务 器 将 把 一 个 网 页 文件 发 送 到 客户 端 浏览 器 ,浏览 器 将 其 打开 并 显示 。 一 般 情 
况 下 ,浏览 器 将 在 整个 浏览 器 窗口 显示 打开 的 网 页 文件 。 其 实 , 浏 览 器 也 可 以 将 浏览 器 窗口 
分 成 几 个 窗 格 区 域 ,让 网 页 在 某 个 特定 的 窗 格 显示 ,以 丰富 网 页 浏览 的 显示 。 

1. 帧 (frame) 与 帧 页 

将 浏览 器 窗口 划分 为 多 个 区 域 ( 子 窗口 ) ,每 个 区 域 称 为 一 个 帧 (Frame) 。 在 每 个 帧 窗 
口 , 可 以 显示 一 个 独立 的 HTML 文件 。 即 每 个 HTML 文件 占据 一 个 帧 ,而 多 个 帧 可 以 同 
时 显示 在 同一 个 浏览 器 窗口 中 ,包含 多 个 帧 的 网 页 称 为 帧 页 或 框架 网 页 。 

帧 页 定义 的 一 般 形式 是 : 





<frameset rows="" cols=""> 
<frame name=" " src="" target=" "> 
< frame name=" " src="" target=" "> 
</frameset > 


(1) < frameset >…</frameset > 标记 

标记 < frameset > 定义 帧 ,用 于 定义 主 文档 中 有 几 个 帧 并 且 各 个 帧 是 如 何 排列 的 。rows 
属性 用 来 设置 主 文档 中 各 个 帧 的 行 定位 ,而 cols 属性 用 来 设置 主 文档 中 各 个 帧 的 列 定位 。 
这 两 个 属性 的 取 值 可 以 是 百分数 、 绝 对 像素 值 或 星 号 ("* ”) ,其 中 星 号 代表 那些 未 被 说 明 的 
空间 ,如 果 同 一 个 属性 中 出 现 多 个 星 号 则 将 剩 下 的 未 被 说 明 的 空间 平均 分 配 。 同 时 ,所 有 的 
帧 按照 rows 和 cols 的 值 从 左 到 右 , 从 上 到 下 排列 。 

例如 : rows 二 "150px, x " ,表示 将 浏览 器 窗口 分 成 两 行 ,第 一 行 高 度 占 150px, 剩 余 屏 
幕 空间 属于 第 二 行 。cols 二 "x* ,1024px, * "表明 将 浏览 器 窗口 分 成 三 列 , 中 间 列 占 1024 像 
素 宽度 ,屏幕 剩余 空间 在 两 侧 平分 ,像素 数 由 实际 的 屏幕 分 辩 率 决定 。 

(2) < frame > 标记 

通过 < frameset > 标记 ,将 浏览 器 窗口 分 成 若干 帧 ,每 个 帧 窗口 可 以 显示 一 个 独立 的 网 
页 ,也 可 以 进一步 划分 成 帧 。 对 每 一 个 帧 的 定义 由 < frame > 标记 来 完成 。< frame > 标记 具 
有 name 和 src 属性 ,这 两 个 属性 都 是 必须 赋值 的 。src 是 此 帧 要 显示 的 网 页 的 url; name 
是 此 帧 的 名 字 。 在 < a > 标记 或 < form > 标记 中 ,可 是 设 target 属性 的 值 为 一 个 帧 的 name 属 
性 值 。 

此 外 ,< frame > 标记 还 有 scrolling 和 noresize 属性 ,scrolling 用 来 指定 是 否 显 示 深 动 
条 , 取 值 可 以 是 “yes”( 显 示 )、“no”( 不 显示 ) 或 “auto”( 文 档 内 容 超 出 窗口 时 自动 显示 )。 
noresize 属性 直接 加 入 标记 中 ,不 需 赋 值 , 禁 止 用 户 调整 帧 的 大 小 。 

目前 由 于 计算 机 显示 器 技术 的 发 展 , 显 示 器 屏幕 尺寸 越 来 越 大 ,屏幕 的 分 辩 率 也 越 来 越 
高 ,早期 在 800X600,1024X768 图 形 分 辩 率 下 的 网 页 设计 受 屏幕 空间 限制 的 情况 已 经 不 再 
存在 。 浏 览 器 窗口 划分 帧 ,通过 客户 端 脚本 程序 控制 帧 的 显示 和 隐藏 ,从 而 释放 更 大 的 屏幕 
空间 的 应 用 需求 变 小 了 。 由 屏幕 尺寸 变 大 带 来 的 程序 用 户 界面 设计 的 变化 也 同样 在 影响 着 
网 页 的 布局 和 设计 。 
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2. 浮动 帧 (Ciframe) 

在 帧 页 (frameset) 中 , 帧 (frame) 是 对 浏览 器 窗口 的 水 平和 垂直 方向 的 分 隔 。 对 一 个 帧 
窗口 也 可 以 进一步 类 似 的 分 隔 , 即 帧 可 以 柑 套 。 在 每 一 个 帧 窗口 ,可 以 显示 网 页 文件 。 除 此 
之 外 ,有 时 候 我 们 可 能 希望 将 浏览 器 窗口 的 某 一 个 区 域 定义 为 一 个 帧 , 它 是 独立 的 ,不 是 按 
照 行列 来 划分 的 ,例如 : 一 个 单元 格 或 一 个 div。 我 们 把 这 样 的 帧 称 浮 动 帧 (iframe) ,又 称 内 

浮动 帧 是 用 < iframe > 标记 的 帧 ,通常 利用 表格 布局 ,在 一 个 单元 格 中 插入 浮动 帧 ,一 般 
形式 是 : 


< iframe id= "" name= "" style=" " src=""></iframe> 


在 < iframe > 标记 中 ,可 以 定义 帧 的 style 属性 ,设置 帧 窗口 的 大 小 ,例如 :style 二 
"width:100%; height:100% ;visibility: inherit; z-index:2;", 其 中 宽度 和 高 度 采 用 百 分 
比 , 是 指 和 容器 的 比 。src 属性 对 应 了 帧 窗口 要 显示 的 网 页 的 URL 值 。 通 过 浮动 帧 ,可 以 
灵活 地 设置 表单 < form > 服务 端 程序 输出 页 面 内 容 的 显示 位 置 ,而 不 一 定 是 表单 所 在 的 浏 
览 器 窗口 。 


3.3 层 到 样式 表 CSS 技术 


在 HTML 中 ,大 多 数 标 记 都 包含 了 默认 的 显示 样式 ,默认 显示 样式 定义 了 所 标记 内 容 
在 浏览 器 中 默认 的 布局 和 显示 外 观 。 同 时 ,HTML 还 提供 修改 标记 默认 显示 样式 的 手段 ， 
这 就 是 设置 标记 的 属性 值 , 但 是 这 种 修改 是 有 限 的 。 如 果 要 对 标记 的 显示 做 详细 的 定制 , 通 
过 修改 标记 属性 的 方法 并 不 理想 ,因为 这 需要 设置 更 多 的 标记 属性 。 

从 网 页 管理 和 维护 的 角度 出 发 ,我们 总 是 希望 将 文档 内 容 和 对 内 容 显示 的 设 定 分 开 , 通 
过 设置 标记 属性 来 修改 标记 的 默认 显示 的 方法 是 无 法 达到 这 样 的 目的 的 。 因 此 ,在 1997 年 
12 月 发 布 的 HTML 4 中 ,引入 了 层 伙 样式 表 的 概念 ,其 核心 思想 就 是 实现 将 标记 内 容 和 显 
示 样 式 的 定义 进行 分 离 ,从 而 使 得 文档 结构 良好 ,更 加 方便 文档 的 维护 。 


3.3.1 CSS 及 其 发 展 


随 着 HTML 的 成 长 ,为 了 满足 页 面 设计 者 的 要 求 ,HTML 不 断 地 添加 新 的 显示 功能 ， 
例如 : 标记 属性 。 但 是 , 随 着 这 些 功能 的 增加 .使 得 HTML 变 得 越 来 越 杂 乱 , HTML 页 面 
越 来 越 腔 肿 。 在 这 样 的 情况 下 ,催生 了 层 释 样式 表 概念 的 产生 和 发 展 。 

1. 什么 是 层 全 样式 表 

在 HTML 出 现 以 后 ,样式 的 概念 就 以 各 种 形式 存在 着 。1994 年 , 哈 坤 " 利 提出 了 层 释 
样式 表 (Cascading Style Sheet,CSS) 的 最 初 建议 , 它 是 一 种 为 Web 文档 添加 样式 的 简单 机 
制 , 即 为 HTML 标记 语言 提供 一 种 样式 描述 ,定义 元 素 的 显示 方式 。 

所 谓 层 释 (Cascading) ,是 指 对 于 容器 元 素 指 定 的 所 有 选项 ,将 被 自动 地 应 用 到 其 包含 
的 所 有 元 素 中 。 当 属性 设置 发 生 层 释 时 , 即 对 一 个 元 素 多 次 设置 同一 个 样式 ,将 使 用 最 后 一 
次 设置 的 属性 值 。 我 们 可 以 这 样 理解 ,在 HTML 中 ,标记 是 可 以 嵌 套 的 ,例如 ,在 一 个 表格 
中 ,对 于 一 个 单元 格 ,里 面 的 内 容 可 以 被 多 个 标记 所 标记 ,看 下 面 的 代码 : 








<table style= "font — size:22px;color: #ff0000"> 


<tr> 
<td> 姓 名 </td> 
<td style = "font - size:15px; font - weight:bold; color: #0000ff;"> 性 别 </td> 
</tr> 
</table> 


在 上 述 代码 中 ,我 们 可 以 看 到 ,姓名 和 性别 两 个 单元 格 的 内 容 从 内 到 外 分 别 被 < td >、 
<tr> 和 < table > 标记 所 标记 ,其 中 在 < table > 标记 和 < td > 标记 中 都 定义 了 显示 样式 ,那么 姓 
名 和 性 别 单元 格 的 内 容 究竟 以 怎样 的 样式 显示 呢 ? 层 释 的 意思 是 这 样 的 , 当 两 种 样式 一 样 
且 内 外 冲突 的 时 候 , 按 最 内 层 的 定义 显示 ,如 果 内 外 没有 冲突 , 则 共同 作用 于 内 容 。 

2. CSS 技术 的 发 展 

1996 年 底 , W3C 公布 了 层 芭 样式 表 CSS 规范 第 一 版 。1998 年 5 月 CSS2 正式 发 布 ， 
2004 年 CSS 2. 1 发 布 。 在 后 续 版 本 CSS 3 的 研发 过 程 中 ,采用 模块 化 开发 ,因此 CSS 3 的 
发 布 时 间 并 不 是 一 个 时 间 点 ,而 是 成 熟 一 个 模块 ,发布 一 个 模块 。 从 2002 年 5 月 15 日 发 布 
第 一 个 定义 文本 行 模型 的 CSS 3 Line 模块 开始 ,直到 2014 年 10 月 ,W3C 发 布 HTML 5.0 
规范 ,几乎 每 一 年 W3C 都 会 发 布 相应 的 CSS 3 模块 。 

CSS 3 包含 的 主要 样式 模块 见 表 3-6 。 

表 3-6 CSS 3 部 分 样式 模块 列表 







































































序号 模块 名 称 说 明 
1 Line 定义 文本 行 模型 
2 Fonts 定义 CSS 字体 模型 
3 Text 定义 文本 模型 
4 Lists 定义 列表 相关 样式 
5 Image Value 定义 图 像 内 容 显示 模型 
6 Hyperlink Presenation 定义 超 链 接 的 表示 规则 
7 Background and Borders 定义 边框 和 背景 模型 
8 Generated and Replace Content 定义 CSS 3 生成 及 更 换 内 容 功能 
9 Presentation Levels 定义 演示 效果 功能 
10 Speech 定义 “语音 "样式 规则 
二 Animations 定义 CSS 3 动画 模型 
12 Transitions 定义 动画 过 渡 效 果 
13 2D Transforms 定义 CSS 3 2D 转换 模型 
14 3D Transforms 定义 CSS 3 3D 转换 模型 
15 Generated Content For Page Media 定义 分 页 媒体 内 容 模型 
16 Grid Positioning 定义 CSS 的 网 格 定义 规则 
17 Basic box 定义 CSS 的 基本 盒子 模型 
18 Flexible Box Layout 定义 灵活 的 框 布局 模块 
19 Template Layout 定义 模板 布局 模型 
20 Syntax 重新 定义 了 CSS 语法 规则 
21 Cascading and inheritance 重新 定义 了 CSS 层 琶 和 继承 规则 
在 CSS 中 ,预定 义 了 大 量 的 CSS 样式 属性 ,在 网 页 制作 时 采用 层 琶 样式 表 技 术 , 可 以 有 3 
效 地 对 页 面 的 布局 字体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精确 的 控制 。CSS 可 以 将 样式 定 | 章 
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义 在 HTML 元 素 的 style 属性 中 ,也 可 以 定义 在 HTML 文档 的 header 部 分 ,也 可 以 将 样式 
声明 在 一 个 专门 的 CSS 文件 ,以 供 HTML 页 面 引用 ,实现 多 个 页 面 风格 的 统一 。 总 之 ， 
CSS 样式 表 可 以 将 所 有 的 样式 声明 统一 存放 ,进行 统一 管理 ,可 以 对 整个 网 站 的 页 面 进行 
总 体 控 制 , 从 而 解决 了 HTML 的 结构 化 问题 和 实现 Web 中 的 总 体外 观 控制 。 


3.3.2 CSS 样式 属性 


在 CSS 规范 中 ,定义 了 大 量 的 样式 属性 ,利用 这 些 属性 可 以 对 标记 的 显示 样式 进行 精 
细 的 设计 ,达到 传统 标记 属性 无 法 实现 的 功能 和 效果 。 在 CSS 属性 中 ,有 些 属性 和 标记 属 
性 功能 是 一 样 的 ,但 是 ,属性 名 和 标记 属性 名 不 一 样 , 用 法 也 不 一 样 。 

CSS 对 网 页 的 控制 是 通过 CSS 样式 属性 实现 的 ,这 些 属性 可 以 分 为 以 下 几 类 。 

1. 字体 属性 

在 CSS 中 ,用 来 控制 文本 的 字体 、 字 号 等 属性 ,在 HTML 5 中 ,字体 标记 < font > 被 废 
除 ,其 功能 由 CSS 替代 ,常用 CSS 字体 属性 见 表 3-7。 


表 3-7 CSS 字体 属性 





属性 名 功 能 RR 
fun fu | 设置 字体 名 称 ,功能 与 < font> 标 | 字体 名 ,例如 :宋体 "仿宋 品 体 等。 默认 值 由 浏览 
” | 记 的 face 属性 一 样 器 确定 





< relative-size >: 相对 于 父 对 象 中 字体 尺寸 进行 相对 调 

节 , 可 选 参数 值 : smaller | larger。 

廊 置 生 二 | < percentage>: 用 百分比 指定 文字 大 小 。 其 百分比 取 

font-size tn i ita ”| 值 是 基于 父 对 象 中 字体 的 尺寸 。< absolute-size >; 根 
- 据 对 象 字 体 进行 调节 ,可 选 参 数值 : xx-small | x-small 

| small | medium | large | xlarge | xxrlarge。 

< length>: 用 长 度 值 指 定 文字 大 小 ,绝对 尺寸 

normal: 指定 文本 字体 样式 为 正常 的 字体 。 

italic: 指定 文本 字体 样式 为 斜体 。 对 于 没有 斜体 的 特 

殊 字 体 ,应 用 oblique。 

oblique: 指定 文本 字体 样式 为 倾斜 字体 

normal: 正常 字体 ,相当 于 number 为 400 。 

bold: 粗 体 ,相当 于 number 为 700。 

font-weight | 设置 字体 粗细 , 取 值 和 可 以 为 bolder: 特 粗 体 。lighter: 细 体 。 

<integer>: 用 数字 表示 文本 字体 粗细 , 取 值 范围 : 100 

| 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 

设置 小 写字 母 改 为 用 大 写 的 小 | normal: 正常 字体 。 

体 字 small-caps: 小 型 的 大 写字 母 字 体 





font-style 设置 字体 样式 








font-variant 








在 CSS 字体 属性 设置 中 ,字体 大 小 的 设置 是 最 复杂 的 .分 4 种 不 同 的 取 值 : @ 字 体 相对 
尺寸 ,单位 为 px( 像 素 ) ,em( 相 对 于 当前 对 象 内 文本 的 字体 尺寸 ),ex( 相 对 于 特定 字体 中 字 
母 x 的 高 度 ) ,之 所 以 说 是 相对 尺寸 ,这 是 因为 ,对 于 同一 个 显示 器 ,不 同 的 分 辩 率 设置 ,每 个 
像素 的 大 小 是 不 一 样 的 。@ 相 对 于 父 容器 元 素 的 一 种 相对 大 小 ,例如 : 百分比 ,如 50% 等 。 
@ 一 组 绝对 大 小 关键 字 , 包 括 xx-small( 最 小 ) ,xsmall( 较 小 ) ,small( 小 ) ,large( 大 ) ,xlarge 


( 较 大 ) ,xxrlarge( 最 大 ) 等 ,实际 显示 大 小 由 浏览 器 和 显示 设备 来 决定 W3C 建议 浏览 器 开 
发 公司 ,将 每 个 关键 字 之 间 的 比例 设 定 为 1.5。@ 四 字体 绝对 尺寸 ,单位 为 pt( 点 ) ,mm( 毫 米 ) 
等 ,与 显示 器 的 分 辩 率 设置 无 关 。 

在 实际 应 用 中 ,对 于 font-size 属性 设置 ,通常 情况 下 我 们 会 觉得 设置 字体 像素 值 作为 
字体 大 小 是 最 好 的 ,实际 情况 并 非 如 此 。 因 为 有 时 候 我 们 希望 通过 浏览 器 来 调整 网 页 中 文 
字 的 大 小 ,但 是 ,如 果 你 在 网 页 中 设置 了 字体 大 小 的 绝对 值 ,浏览 器 就 不 能 改变 这 些 文字 的 
大 小 了 。 为 此 ,在 CSS 中 , 才 有 了 font-size 的 百分比 取 值 和 small 和 large 等 取 值 。 

在 CSS 规范 中 ,可 以 将 字体 的 多 个 属性 合并 为 一 个 font 属性 , 取 值 包括 font-family， 
font-size,font-style,font-weight 和 font-variant, 其 中 .font-family 和 font-size 必须 设置 ,其 
他 属性 可 以 不 设置 ,属性 之 间 的 顺序 任意 。 例 如 : <p style 二 "font: 宋 体 17px blod">。 

2. 文本 属性 

在 传统 的 文档 格式 化 中 ,例如 ,在 Word 字 处 理 器 中 ,通常 将 格式 化 分 为 字体 和 段落 的 
格式 化 。 在 HTML 中 也 不 例外 ,文本 格式 化 就 等 同 于 段落 的 格式 化 。 在 CSS 中 ,提供 了 大 
量 的 文本 属性 ,用 以 精细 地 控制 文本 段落 中 的 字符 间距 、 段 落 缩 进 、 对 齐 方式 ,以 及 段落 行 间 
距 ( 行 高 ) 等 属性 ,CSS 常见 文本 属性 见 表 3-8。 

表 3-8 CSS 常用 文本 属性 





属 性 名 功 能 取 值 
<length>: 指定 文本 缩 进 的 长 度 值 ,如 2em, 表 示 首 行 缩 进 2 
i 个 字符 。 
Te 设置 首 行 第 进 | < percentage>， 指定 文本 缩 进 百分比 。 取 信 可 以 为 负 值 ,可 以 
实现 悬挂 缩 进 





left: 内 容 左 对 齐 。center: 内 容 居 中 对 齐 。right: 内 容 右 对 
齐 。justify: 内 容 两 端 对 齐 。 

start: 内 容 对 齐 开始 边界 。(CSS3) 

end: 内 容 对 齐 结束 边界 。(CSS3) 

设置 字符 大 小 | none: 无 转换 。capitalize: 将 每 个 单词 的 第 一 个 字母 转换 成 
写 转换 大 写 。uppercase: 转换 成 大 写 。lowercase: 转换 成 小 写 
none: 指定 文字 无 装饰 。 

设置 文本 装饰 | underline: 指定 文字 的 装饰 是 下 面 线 。 

线条 的 位 置 overline: 指定 文字 的 装饰 是 上 面 线 。 

line-through: 指定 文字 的 装饰 是 贯穿 线 

设置 文本 装饰 | solid: 实 线 。double: 双 线 。dotted: 点 状 线条 。dashed: 虚 
线条 的 样式 线 。wavy: 波浪 线 

. 设置 文本 装饰 
text-decoration-color 线条 的 颜色 颜色 RGB 色 值 
指定 文字 的 填 y 
text-fill-color 充 颜色 颜色 RGB 色 值 
设置 文本 文字 
text-shadow 的 阴影 及 模糊 
效果 


text-align 设置 水 平 对 齐 





text-transform 





text-decoration-line 





text-decoration-style 











none: 无 阴影 。 
<length > 第 一 个 长 度 值 设 置 阴影 水 平 偏 移 值 ,第 二 个 长 度 值 
设置 阴影 垂直 偏 移 值 ,第 三 个 长 度 值 用 来 设置 阴影 模糊 值 。 

< color>: 设置 对 象 的 阴影 的 颜色 
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续 表 
属 性 名 功 能 取 值 
text-stroke-width 了 本 汪 < length>: 描 边 厚度 值 ,例如 2px 
text-stroke-color Ee 的 < color>: 指定 文字 的 描 边 颜色 RGB 色 值 





设置 字 、 单 词 之 | normal: 默认 间隔 。< length>: 间隔 的 长 度 值 , 可 以 为 负 值 。 
间 的 标准 间隔 ”| 例如 0. 2em, 表 示 0. 2 字符 宽度 


word-spacing 














字符 间距 ,设置 
letter-spacing 字符 或 字母 之 | 同上 
间 的 间隔 
normal: 默认 值 ,内 容 超出 容器 边界 时 不 换行 。break-word: 
d- 设置 换行 
word-wrap 设置 换行 内 容 将 在 边界 内 换行 
a 中 normal: 默认 值 . 允 许 在 词 间 换行 。break-all: 允许 文本 行 的 
word-break 设置 词 间 换 行 任意 字 内 断 开 。keep-all; 不 允许 字 断 开 
i 证 | ltrs 文本 流 从 左 到 有 。rtl: 文本 流 从 有 到 左 
向 





normal: 允许 内 容 项 开 或 游 出 容器 边界 。 

定义 行 高 ,在 段 | <length>: 用 长 度 值 指定 行 高 ,可 以 为 负 值 。 

line-height 落 内 表现 为 行 | < percentage >: 用 百分比 指定 行 高 ,其 百分比 取 值 是 基于 字 
间距 体 的 高 度 尺 寸 , 可 以 为 负 值 。 

< number >: 用 乘积 因子 指定 行 高 








在 上 述 CSS 属性 中 ,有 些 属性 可 以 合并 书写 ,例如 : 装饰 线 三 属性 ,可 以 合并 写作 text- 
decoration, 取 值 是 三 个 每 个 独立 属性 的 值 ,这 样 的 属性 称 为 复合 属性 。 再 如 ,文字 描 边 
text-stroke 属性 也 是 复合 属性 。 

对 文本 段落 的 修饰 是 页 面 设置 中 常见 的 修饰 ,但 是 ,在 段落 标记 <p > 中 ,可 以 设置 的 标 
记 属 性 很 少 。 因 此 ,要 设置 文本 段落 的 显示 样式 ,通常 需要 使 用 CSS 属性 来 完成 ,例如 , 设 
置 首 行 缩 进 两 字符 , 行 间距 为 1.5 倍 , 设 置 如 下 : 


<p style= "text- indent:2em;line ~ height:150% "> 


对 于 首 行 缩 进 的 设置 ,我 们 一 般 使 用 em 单位 ,而 不 是 px. 因 为 虽然 两 者 都 是 相对 大 小 ， 
但 是 px 和 屏幕 分 辨 率 有 关 , 而 em 指 的 则 是 当前 对 象 内 文本 字体 的 尺寸 ,text-indent:2em 
意味 着 首 行 缩 进 两 个 字符 。 

3. 颜色 和 背景 属性 

不 管 是 在 日 常生 活 中 ,还 是 在 计算 机 中 ,颜色 都 是 相 比较 而 存在 的 。 因 此 , 当 我 们 谈论 
颜色 时 ,将 颜色 分 为 前 景色 和 背景 色 ,我 们 关注 的 对 象 颜色 是 前 景 , 它 所 处 的 环境 颜色 就 是 
背景 。 对 物体 颜色 泻 染 的 终极 目标 是 一 个 个 像素 颜色 ,但 一 个 个 像素 来 处 理 ,实在 是 太 麻烦 
了 。 因 此 ,除了 将 对 象 赋予 一 种 统一 的 颜色 外 ,要 表现 多 样 的 颜色 ,我 们 需要 借助 于 图 片 ,一 
块 由 大 量 像素 构成 的 整体 ,这 些 像素 可 以 有 不 同 的 颜色 值 。 

在 HTML 中 ,许多 标记 包含 涉及 颜色 的 标记 属性 ,例如 : < body > 标记 ,包含 bgcolor， 
text,vlink 等 标记 属性 ,用 以 设置 文档 中 文本 颜色 及 背景 色 . 此 外 ,还 包含 background 标记 


属性 来 设置 背景 图 片 。 在 CSS 中 ,同样 有 一 组 用 来 控制 页 面 或 元 素颜 色 .背景 颜色 .背景 图 


片 的 CSS 属性 ,它们 的 功能 和 标记 属性 相似 ,但 名 字 和 用 法 不 同 , 见 表 3-9 。 
表 3-9 CSS 颜色 与 背景 属性 














属 性 名 功 能 取 值 

color 设置 对 象 的 文本 颜色 < color >: 指定 颜色 值 

background-color 设置 背景 颜色 < color >: 指定 颜色 值 
background-image: url( 路 径 / 文 件 名 ) 。 如 果 同 时 设 

back di 设置 

| 置 了 背景 颜色 ,背景 图 片 在 背景 颜色 之 上 
center: 背景 图 像 横向 和 纵向 居中 。 
left: 背景 图 像 在 横向 上 填充 从 左边 开始 。 
right: 背景 图 像 在 横向 上 填充 从 右边 开始 。 
top: 背景 图 像 在 纵向 上 填充 从 顶部 开始 。 

2 背景 图 片 位 置 ( 仅 背景 总 i 
background-position 图 片 不 重复 时 有 效 ) bottom: 背景 图 像 在 纵向 上 填充 从 底部 开始 。 


< percentage >: 用 百分比 指定 背景 图 像 填 充 的 位 
置 ,可 以 为 负 值 。 

<length>: 用 长 度 值 指定 背景 图 像 填充 的 位 置 ,可 
以 为 负 值 





background-origin 


设置 背景 图 像 计 算 
background-position 时 


的 参考 原点 


padding-box: 从 padding 区 域 ( 含 padding) 开 始 显 示 
背景 图 像 。border-box: 从 border 区 域 ( 含 border) 
开始 显示 背景 图 像 。content-box: 从 content 区 域 
开始 显示 背景 图 像 





background-size 


设置 对 象 的 背景 图 像 
的 尺寸 大 小 


auto: 背景 图 像 的 真实 大 小 。< length >: 指定 背景 
图 像 大 小 。< percentage>: 用 百分比 指定 背景 图 像 
大 小 。cover: 将 背景 图 像 等 比 缩放 到 完全 和 蓝 盖 容 
器 ,背景 图 像 有 可 能 超出 容器 。contain: 将 背景 图 
像 等 比 缩放 到 宽度 或 高 度 与 容器 的 宽度 或 高 度 相 
等 ,背景 图 像 始终 被 包含 在 容器 内 





background-clip 


设置 背景 图 像 向 外 裁 
剪 的 区 域 


padding-box: 从 padding 区 域 (不 含 padding) 开 始 向 
外 裁剪 背景 。borderbox: 从 border 区 域 ( 不 含 
border) 开 始 向 外 裁剪 背景 。content-box: 从 content 
区 域 开始 向 外 裁剪 背景 。text: 从 前 景 内 容 的 形状 
(比如 文字 ) 作 为 裁剪 区 域 向 外 裁剪 ,如 此 即 可 实现 
使 用 背景 作为 填充 色 之 类 的 遗 单 效果 





background-repeat 


背景 图 片 重复 方式 


repeat-x( 沿 水 平方 向 平 铺 ) ,repeaty( 沿 垂直 方向 平 
铺 ) ,no-repeat( 不 重复 ) 





background-attachment 


在 设置 background-position 属性 值 时 ,数值 的 设 定 和 背景 图 片 的 大 小 以 及 所 处 容器 的 
尺寸 有 关 。 容 器 的 左上 角 为 坐标 (0,0), 往 下 和 右 都 为 正 , 反 之 为 负 。 属 性 设置 及 含义 举例 
如 下 : background-position:0 0; 表 示 背 景 图 片 的 左上 角 将 与 容器 元 素 的 左上 角 对 齐 。 为 了 





设置 背景 滚动 或 固定 





fixed( 背 景 固 定 ) ,scroll( 背 景 与 页 面 一 起 滚动 


简化 CSS 书写 ,可 以 将 多 个 背景 属性 合并 书写 为 一 个 复合 属性 background, 例 如 : 


background:url(bg. jpg) no ~ repeat scroll 0 0 transparent; 


表示 背景 图 片 在 容器 的 左上 角 ,不 重复 滚动, 透明。 如 果 位 置 为 非 0 值 ,表明 图 片 相对 
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于 容器 左上 角 (0,0) 坐 标 分 别 在 向 上 、 下 、 左 、 右 方向 上 有 位 置 偏 黎 。 在 CSS3 中 ,还 包含 
multiple-background 属性 ,为 一 个 元 素 同时 设置 多 个 背景 图 像 。 

4. 容器 属性 

容器 (Container) 是 指 其 中 可 以 包含 内 部 元 素 ,对 象 或 数据 的 元 素 , 如 表格 (table) .单元 
格 (td) 等 ,页 面 (body) 也 是 容器 对 象 。CSS 中 对 这 样 的 对 象 都 统一 用 容器 属性 来 控制 ,包括 
边 距 属性 ,填充 属性 ,边框 属性 和 图 文 混 排 属性 。 其 中 ,有 些 容器 属性 在 标记 属性 中 也 有 类 
似 的 功能 ,例如 : 在 < body > 标记 中 ,包含 上 边 距 属性 tppmargin ,在 CSS 中 也 有 类 似 的 CSS 
属性 (margin-top) ,但 名 称 和 用 法 不 同 。CSS 常用 容器 属性 见 表 3-10。 


表 3-10 CSS 容器 属性 









































属 性 名 功 能 取 值 
大 小 尺寸 
auto: 无 特定 宽度 值 ,取决 于 其 他 属性 值 。 
width 设置 对 象 宽度 值 < length>: 设置 宽度 的 长 度 值 。 
< percentage>: 定义 宽度 百分比 
min-width 设置 对 象 宽度 最 小 同上 
max-width 值 . 最 大 值 
height 设置 对 象 高 度 值 同上 
min-height 设置 对 象 高 度 最 小 同上 
max-height 值 . 最 大 值 
边框 属性 
< borderstyle>{1,4}, 设 1 一 4 个 值 。 
none: 无 边框 。solid: 实 线 边框 。dotted: 点 状 边框 。 
Dodateni 设置 四 个 边框 样式 ee 虚线 边框 。double: 双 线 边框 。hidden: 隐藏 边 
如 果 提 供 全 部 四 个 参数 值 , 按 上 、 右 、 下 、 左 的 顺序 作用 于 
四 边 。 如 果 只 提供 一 个 ,将 用 于 全 部 的 四 边 
< border-width>{1,4) , 设 1 一 4 个 值 。 
. <length>: 设置 边框 厚度 的 长 度 值 。medium: 定义 默认 
Ne 次 置 四 个 边 术 宽度 | 厚度 的 边框 thin 定义 比 默认 厚度 细 的 边框 。thick 
定义 比 默认 厚度 粗 的 边框 
border-color 设置 四 个 边框 颜色 | < color>{1,4}, 设 1 一 4 个 值 
人 分 别 设置 上 、 下 、| 设 定 边 杠 线 条 的 样式 、 线 宽 和 颜色 ,三 个 属性 顺序 任意 。 
左 、 右 四 个 边框 三 | 例如 : solid lpx # ff0000, 表 示 边 框 为 实 线 线条 ,1 个 像 
> 属性 素 宽度 ,红色 
borer-right 
[< length > | < percentage> ]{1,4} [ / [ < length> | 
< percentage> ]{1,4) ], 取 1~4 个 值 。 
、 < length>: 设置 圆 角 半径 长 度 值 。< percentage >: 设置 
ee 设置 四 个 角 使 用 国 | 大 半 委 长 度 百分比 。 
向 光 术 如 果 只 提供 一 个 ,将 全 部 用 于 四 个 角 。 如 果 提 供 全 部 四 
个 参数 值 ,将 按 上 左 (top-left)、 上 右 (top-right)、 下 右 
(bottom-right) \、 下 左 (bottom-left) 的 顺序 作用 于 四 个 角 





续 表 








属 性 名 功 能 取 值 
border-top-left-radius 
border-top-right-radius 
border-bottom- 分 别 设置 四 个 圆 角 
left-radius 边框 同上 
border-bottom- 
right-radius 

设置 边框 样式 使 用 | none: 无 背景 图 片 。 

border-image 图 像 来 填充 ,替代 | < url>: 使 用 相对 地 址 指定 图 像 。 


border-style 


背景 图 的 分 隔 方式 ,扩展 和 填充 属性 





box-shadow 


设置 对 象 阴影 


none: 无 阴影 。 

<length>: 第 1 个 长 度 值 设置 阴影 水 平 偏 移 值 , 第 2 个 
长 度 值 设置 阴影 垂直 偏 移 值 ,如 果 提 供 第 3 个 长 度 值 则 
用 来 设置 阴影 模糊 值 , 如 果 提 供 第 4 个 长 度 值 则 用 来 设 
置 阴影 外 延 值 。 

< color >: 设置 对 象 的 阴影 的 颜色 。 

inset: 设置 对 象 的 阴影 类 型 为 内 阴影 。 该 值 为 空 时 , 则 
对 象 的 阴影 类 型 为 外 阴影 





box-reflect 


设置 对 象 倒影 


倒影 方向 < direction>: 

above: 倒影 在 对 象 上 边 。below: 倒影 在 对 象 下 边 。 
left: 指定 倒影 在 对 象 左 边 。right: 倒影 在 对 象 右边 。 

偏 移 量 < offset>: 

<length>: 定义 倒影 与 对 象 之 间 的 间隔 。 

< percentage>: 定义 倒影 与 对 象 之 间 间 隔 的 百分比 。 
遮 置 图像 < mask-box-image >: 

none: 无 遮 罩 图 像 。< url>: 指定 遗 单 图 像 。 

< linear-gradient>: 使 用 线性 渐变 创建 迹 畦 图 像 。 

< radial-gradient >: 使 用 径 向 渐变 创建 谈 畦 图 像 。 

< repeating-linear-gradient >: 使 用 重复 的 线性 渐变 创建 
遮 单 单 像 。 

< repeating-radial-gradient>: 使 用 重复 的 径 向 渐变 创建 
遮 单 图 像 





边 距 属 性 (对 象 到 周围 对 


象 的 距离 ) 





margin 


设置 对 象 四 边 的 外 
延边 距 


[<length> | < percentage> | auto ]{1,4) ,设置 1 一 4 个 值 。 
auto: 被 设置 为 相对 边 的 值 。 

<length>: 设置 外 边 距 的 长 度 值 ,可 以 为 负 值 。 

< percentage>: 设置 外 边 距 百分比 ,可 以 为 负 值 。 

如 果 提 供 全 部 四 个 参数 值 , 将 按 上 , 右 、 下 \ 左 的 顺序 作用 
于 四 边 。 如 果 只 提供 一 个 ,将 用 于 全 部 的 四 边 





margin-top 
margin-bottom 


margin-left 


分 别 设置 项 端 、 底 
端 和 左 侧 、 右 侧 
边 距 





margin-right 





同上 
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续 表 
属 性 名 功 能 取 值 
衬 距 属性 (内 容 到 边框 的 距离 
padding Re 同 margin 属性 
PE 分 别 设置 上 、 下 、 
padding-bottom 
左右 四 边 的 内 | 同上 
padding-left 衬 距 
padding-right 
表格 属性 
auto: 默认 的 自动 算法 。 布 局 将 基于 各 单元 格 的 内 容 , 表 
格 在 每 一 单元 格 读 取 计 算 之 后 才 会 显示 出 来 ,速度 很 慢 。 
table-layout 设置 表格 布局 算法 | fixed: 固定 布局 算法 。 水 平 布 局 是 仅仅 基于 表格 的 宽 


度 , 表 格 边框 的 宽度 ,单元 格 间距 , 列 的 宽度 ,而 和 表格 内 
容 无 关 , 内 容 可 能 被 裁 切 





caption-side 


设置 表格 caption 
的 位 置 


top: caption 在 表格 上 边 。 
bottom: caption 在 表格 下 边 





border-collapse 


设置 表格 的 行 和 单 
元 格 的 边 是 合并 还 


separate: 边框 独立 。 
collapse: 相 邻 边 被 合并 








是 独立 
ee < length>{11,2} ,可 以 设 1 个 或 2 个 值 。 

border spacing 航 边 生 在 横 自 大 级 | < length>: 定义 行 和 单元 格 的 边框 在 横向 和 纵向 上 的 
向 上 的 间距 全 
设置 当 表格 的 单元 


empty-cells 


格 无 内 容 时 ,是 否 
显示 该 单元 格 的 
边框 





hide: 当 表格 的 单元 格 无 内 容 时 ,隐藏 该 单元 格 的 边框 。 
show: 当 表 格 的 单元 格 无 内 容 时 ,显示 该 单元 格 的 边框 


在 上 述 CSS 属性 中 ,除了 独立 属性 外 ,还 包括 多 个 复合 属性 。 例 如 ,边框 对 应 三 个 独立 
属性 border-style,border-width 和 border-color, 可 以 分 别 设置 ,也 可 以 合并 设置 复合 属性 





border。 例 如 ,boder: 


px soloid #ff0000, 定 义 了 边框 为 1 个 像素 宽度 、 实 线 、 红 色 的 四 个 边 


框 。 除 了 统一 设置 四 个 边框 属性 外 ,也 可 以 分 别 设置 ,这 就 是 border-top, border-right， 
border-left 和 border-bottom 四 个 复合 属性 ,分 别 对 应 上 下 左右 四 个 边框 。 

上 述 边 框 设置 是 对 表格 边框 的 设置 ,要 显示 单元 格 的 边框 ,需要 设置 表格 属性 border 一 
"lpx" ,该 属性 不 可 设置 线 型 和 颜色 。 表 格 也 包含 CSS 属性 border, 其 设置 可 以 是 线 宽 、 线 
型 和 颜色 ,例如 : 1px solid #0000ff, 该 设置 不 仅 用 于 表格 四 个 边框 ,也 将 用 于 单元 格 边框 。 
设置 表格 CSS 属性 bordercollapse:collapse:, 则 表格 边框 和 单元 格 边框 共用 。 对 于 单元 格 
边框 ,也 可 以 通过 CSS 属性 单独 设置 。 

此 外 ,对 于 边 距 属性 , margin-left、margin-right 可 以 取 负 数 ,例如 : < span style 一 
"margin-left:-10px"></span >, 则 表示 在 正常 输出 位 置 左 移 10 个 像素 ,这 可 能 会 让 盖 左边 
已 有 的 内 容 , 起 到 一 种 特别 效果 。 


5. 列表 属性 

在 日 常 工作 中 ,我 们 经 常 把 内 容 相关 的 项 目 并 列 地 罗列 出 来 ,这 就 是 列表 (List)。 列 表 
项 的 前 面 通常 添加 项 目 符号 或 数字 以 表达 无 序 或 有 序 的 概念 。 同 时 ,列表 项 通过 缩 进 的 方 
式 , 可 以 分 层 组 织 数据 ,使 数据 的 组 织 逻 辑 清 晰 ,显示 直观 。 

在 HTML 中 ,包含 了 列表 相关 的 标记 <ol>、< ul>、<1i> 等 ,为 了 对 列表 进行 更 精细 化 
的 设置 ,在 CSS 中 ,提供 了 控制 列表 样式 的 CSS 属性 ,包括 列表 样式 、 图 形 符号 、 列 表 位 置 三 
个 部 分 ,CSS 列表 属性 见 表 3-11。 

表 3-11 CSS 列表 属性 


属 性 名 功 能 取 值 

none: 无 。disc: 实心 圆 。circle: 空心 圆 。Squre: 实心 
方块 。Decimal: 阿拉 伯 数 字 。lower-roman: 小 写 罗马 
字母 。upper-roman: 大 写 罗 马 字 母 。lower-alpha: 小 
写 英 文字 母 。upper-alpha: 大 写 英文 字母 等 





list-style-type 设置 列表 中 的 项 日 符号 





list-style-image 设置 列表 项 前 的 图 形 符号 | none:: 无 。url(imageURL) 





设置 列表 项 中 第 二 行 的 起 | inside: 在 BOX 模型 内 部 显示 。 


list-style-position 











始 位 置 outside: 在 BOX 模型 外 部 显示 ,默认 值 
ti 复合 属性 ,一 次 定义 前 面 | 设置 list-style-type 或 list-style-image, list-style-position 
ist-style 
的 各 独立 列表 属性 《同时 给 定 两 个 属性 值 , 属 性 值 之 间 用 空格 分 隔 ) 


在 设置 显示 位 置 时 , 提 到 一 个 概念 , 即 BOX 模型 。 那 么 ,什么 是 BOX 模型 呢 ? 所谓 
outside, 是 指 列表 项 目 符号 放 在 项 目 文本 以 外 , 当 某 项 内 容 需 要 换行 时 ,换行 后 的 内 容 和 上 
一 行 的 文字 左 冲 齐 , 而 不 是 和 上 一 行 的 项 目 符号 左 冲 齐 ,这 是 列表 标记 的 默认 值 。 所 谓 
inside 是 指 列表 项 目 符号 和 列表 项 文本 作为 一 个 整体 , 当 某 项 的 内 容 超 过 容器 边界 需要 换 
行 时 ,换行 后 的 文本 和 上 一 行 的 项 目 符号 左 冲 齐 。 

我 们 看 下 面 代 码 : 

<ul style= "width:90px; list - style ~ position:outside"> 

<1i>HTML 5 扩展 标记 </1i> 
<1i>CSS 基本 属性 </1i> 


<1i> Css3 扩展 属性 </1i> 
</ul> 


在 浏览 器 中 的 显示 如 下 : 


. HIL5 扩 展 标 


记 
。 CSS 基 本 属性 
。 ER 


6. 定位 属性 

当 浏 览 器 打开 HTML 文档 时 ,总 是 从 上 到 下 对 文档 中 的 每 一 个 元 素 ,按照 标记 顺序 输 
出 。 根 据 是 否 产 生 换 行 ,HTML 元 素 分 为 块 (block) 元 素 和 行内 (inline) 元 素 。 块 元 素 在 输 
出 前 后 会 产生 换行 ,例如 : 标题 元 素 ,< p > 标记 ,< table > 标记 .<form > 标记 ,< div > 标记 等 ， 
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可 以 将 输出 内 容 看 作 一 个 矩形 块 。 行 内 元 素 在 输出 前 后 不 会 产生 换行 ,只 有 在 到 达 边 界 时 
产生 自动 换行 ,例如 : < span > 标记 ,内 容 输出 可 以 看 作 一 个 行内 框 。 

正常 情况 下 ,HTML 文档 元 素 按照 先后 顺序 输出 文档 流 。 如 果 要 改变 这 种 正常 的 输出 
位 置 ,可 以 对 元 素 输出 进行 重新 定位 。 定 位 的 基本 思想 就 是 允许 定义 元 素 框 相对 于 其 正常 
位 置 应 该 出 现 的 位 置 ,或 者 相对 于 父 元 素 、 另 一 个 元 素 甚 至 浏览 器 窗口 本 身 的 位 置 。 从 而 建 
立 列 式 布局 ,将 布局 的 一 部 分 与 男 一 部 分 重 全 ,完成 通常 需要 使 用 多 个 表格 才能 完成 的 
任务 。 

为 了 更 精细 地 控制 文档 内 容 的 输出 ,在 CSS 中 .提供 了 一 组 定位 属性 ,可 以 对 元 素 的 输 
出 进行 定位 ,改变 正常 的 输出 流 结果 ,精确 控制 页 面 上 对 象 的 输出 位 置 , 见 表 3-12。 


表 3-12 CSS 定位 属性 


属性 名 功 能 取 值 

static: 无 特殊 定位 ,对 象 遵循 正常 文档 流 。relative: 对 象 遵 循 正 
常 文档 流 ,依据 位 置 属 性 在 正常 文档 流 中 的 偏 移 位 置 。absolute: 
position | 设置 定位 方式 对 象 脱离 正常 文档 流 , 使 用 位 置 属性 进行 绝对 定位 。fixed: 对 象 
脱离 正常 文档 流 , 使 用 top、right、bottom.left 等 属性 以 窗口 为 参考 
点 进行 定位 , 当 出 现 滚动 条 时 ,对 象 不 会 随 着 滚动 

auto: 无 特殊 定位 ,根据 HTML 定位 规则 在 文档 流 中 分 配 。< 
length >: 用 长 度 值 定义 距离 偏 移 量 , 可 以 为 负 值 。< percentage >: 
用 百分比 来 定义 距离 偏 移 量 , 可 以 为 负 值 








设置 元 素 顶 部 到 父 对 
象 顶 部 的 距离 偏 移 量 
Ie | 设置 元 来 左边 到 父 对 | 

象 左边 的 距离 偏 移 量 


top 








设置 元 素 底部 到 父 对 | 
bottom 加 同上 
象 底部 的 距离 偏 移 量 

At | 设置 元 来 右边 到 父 对 | 后 
象 右边 的 距离 偏 移 量 E 

取 值 为 整数 (可 以 是 负数 ), 元 素 的 z-index 属性 默认 值 为 0, 当 多 个 
z-index | 设置 元 素 状 放 次 序 元 素 发 生 z-index 层 全 时 , 值 大 的 在 上 面 , 因 此 如 果 有 位 置 交 叉 ,会 
出 现 谈 挡 














在 确定 距离 偏 移 量 时 ,可 以 使 用 数值 和 百分比 ,利用 计算 函数 ,例如 ,定义 一 个 150pxX 
40px 的 图 层 , 在 浏览 器 窗口 中 垂直 和 水 平 居中 ,图 层 样式 定义 如 下 : 


#wincenter{ 

position:absolute; 

top:calc(50% — 20px); 

left:calc(50% 一 75px); 

width:150px; 

height:40px; 

background: # eee; 

} 

<div id = "wincenter"> 水 平 垂直 居中 </div> 


7. 页 面 布局 属性 
在 传统 的 页 面 布 局 中 ,通常 包括 页 面 大 小 、 边 距 、 文 字 方 向 、 分 栏 、 冲 齐 方式 等 。 简 单 地 


讲 , 页 面 布局 就 是 对 页 面 空 间 的 分 隔 和 安排 。 在 CSS 中 ,网 页 布局 可 以 归纳 为 以 下 三 种 


模式 。 


(1) 网 格 (Grid) 布 局 模式 。 网 格 布局 ,也 称 为 块 布 局 ,是 最 传统 的 页 面 布局 方式 。 其 基 
本 思想 是 将 页 面 分 成 一 个 个 的 网 格 块 ,常用 的 标记 是 table 和 div, 通 过 控制 div 的 位 置 、 大 
小 、 浮 动 、 显 示 和 隐藏 来 实现 页 面 布局 控制 。 

(2) 伸缩 盒 (Flexible box) 模 式 。 这 是 CSS3 新 增 的 页 面 布局 模型 ,Flexbox 布局 的 基本 
思想 是 定义 一 个 Flex 容器 , 即 设置 容器 对 象 的 display 属性 值 为 box,Flex 容器 内 包含 的 元 
素 可 以 自动 改变 大 小 以 适应 可 用 空间 的 变化 。 


(3) 多 栏 (multiple columns) 布 局 。 将 对 象 分 成 多 栏目 ,为 CSS3 新 增 布局 方式 。 页 面 


布局 相关 CSS 属性 见 表 3-13 。 





表 3-13 页 面 布局 常用 属性 





























属 性 名 功 能 常见 取 值 
网 格 (grid) 通 用 属性 
none: 隐藏 对 象 ,与 visibility 属性 的 hidden 值 不 同 ,其 不 为 
nam 一 点 一 ,rn | 被 隐藏 的 对 象 保留 物理 空间 。block: 设 定 元 素 为 块 元 素 。 
Pe ee ee 设 定 元 素 为 行内 元 素 。list-item: 设 定 元 素 为 列表 
据 屏幕 物理 空间 。 | box: 将 对 象 作为 弹性 使 模 型 显示 。inline box: 将 对 象 作 
为 内 联 块 级 弹性 盒 模型 显示 
设置 对 象 是 否 显示 。| visible: 设置 对 象 可 见 。hidden: 隐藏 对 象 。collapse: 主要 
visibility 隐藏 对 象 保留 其 占 | 用 来 隐藏 表格 的 行 或 列 , 隐 藏 的 行 或 列 能 够 被 其 他 内 容 
据 的 物理 空间 使 用 
none: 不 浮动 。left: 浮 在 当前 行 的 左边 。right: 浮 在 右 
. ,zx | 边 。 当 该 属性 不 等 于 none 引起 对 象 浮动 时 ,浮动 对 象 的 
oat es: es J 休学 动 | display 特性 将 被 忽略 , 即 display 属性 等 于 block 的 块 对 象 
将 被 视 作 行内 对 象 。 该 属性 可 以 被 应 用 在 非 绝 对 定位 的 任 
何 元 素 上 
a _，| none: 允许 两 边 都 可 以 有 浮动 对 象 。left: 不 允许 左边 有 浮 
dle eo 动 对 象 。rights 不 允许 右边 有 浮动 对 象 ，both: 不 允许 两 
侧 有 浮动 对 象 
. auto: 无 剪 切 。rect(top，right，bottom，left) ,形状 剪 切 。 
oy 设 秆 对象 可 视 区 域 只 有 position 的 值 为 absolute 时 ,此 属性 方 可 使 用 
ee auto: 根据 窗口 大 小 剪 切 内 容 并 显示 滚动 条 ,此 为 body 对 象 
i 设置 内 容 超出 高 度 | 和 textarea 的 默认 值 。visible: 不 剪 切 内 容 。hidden: 将 超出 
a 宽度 时 的 剪 切 方式 对 象 尺寸 的 内 容 裁剪 ,不 显示 滚动 条 。scroll: 超出 对 象 尺寸 
的 内 容 进行 裁剪 ,并 以 滚动 条 的 方式 显示 超出 的 内 容 
伸缩 盒 (Flexible box) 布 局 
horizontal: 设置 子 元 素 为 水 平 排列 。 
jd at 设置 弹性 盒 模型 对 | vertical: 设置 子 元 素 为 纵向 排列 。 
象 子 元 素 排 列 方式 inline-axis: 沿 行内 轴 排 列子 元 素 ( 从 左 往 右 ) 。 
block-axis: 按 块 排列 子 元 素 ( 从 上 往 下 ) 
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续 表 
属 性 名 功 能 常见 取 值 
start: 从 开始 位 置 对 齐 ( 大 部 分 情况 等 同 于 左 对 齐 ) 。 
center: 居中 对 齐 。 
i 单 性 盒 4 对 
box-align le 时 end: 从 结束 位 置 对 齐 ( 大 部 分 情况 等 同 于 右 对 齐 )。 
亚 baseline: 子 元 素 基 线 对 齐 。 
stretch : 子 元 素 自 适应 父 元 素 尺寸 
es 设置 弹性 盒 模型 对 | start,center,end 属性 同上 。 
ee 象 子 元 素 对 齐 方式 “| justify: 两 端 对 齐 
设置 弹性 盒 模型 对 
box-flex 象 的 子 元 素 如 何 分 | < number>: 指定 对 象 所 分 配 其 父 元 素 剩 余 空 间 的 比例 
配 其 剩余 空间 
i 省 合 0 
box-ordinal-group si < integer>: 子 元 素 显 示 顺 序 





多 栏 (multiple columns) 布 局 





column-count 


设置 分 栏 列 数 


< integer>: 定义 列 数 。 
auto: 根据 column-width 自 定 分 配 列 数 





column-witdh 


设置 列 的 宽度 


<length>: 定义 列 宽 
auto: 根据 column-count 自 定 分 配 宽度 





column-gap 


设置 列 与 列 之 间 的 
间隙 大 小 


< length>: 定义 列 与 列 之 间 的 间 院 。 
normal: 与 font-size 大 小 相同 





column-rule-style 


设置 列 与 列 之 间 的 
边框 样式 


同 border-style 属性 





column-rule-width 


设置 列 与 列 之 间 的 
边框 厚度 


同 border-width 属性 





column-rule-color 


设置 列 与 列 之 间 的 
边框 颜色 


同 border-color 属性 








| 设置 列 的 高 度 是 否 | auto: 列 高 度 自 适应 内 容 
统一 balance: 所 有 列 的 高 度 以 其 中 最 高 的 一 列 统一 
column-span 设置 是 否 横 跨 列 none: 不 跨 列 。all: 横 跨 所 有 列 


Flexbox( 伸 缩 盒 ) 布 局 是 CSS3 中 一 个 新 的 布局 模式 ,以 实现 网 络 中 更 为 复杂 的 网 页 布 
局 设计 需要 。Flexbox 由 伸缩 容器 和 伸缩 项 目 组 成 。 通 过 设置 元 素 的 display 属性 为 box 
或 inline-box 可 以 得 到 一 个 伸缩 容器 。 设 置 为 flex 的 容器 被 泻 染 为 一 个 块 级 元 素 ,而 设置 
为 inline-box 的 容器 则 被 泻 染 为 一 个 行内 元 素 。 弹 性 盒 布 局 可 以 更 好 地 适应 屏幕 大 小 的 变 








化 ,同时 对 于 难以 控制 的 浮动 可 以 实行 更 好 的 控制 。 


在 CSS 有 关 行 高 和 冲 齐 方式 中 ,经 常会 遇 到 基线 、 底 线 、 顶 线 、 中 线 、 内 容 区 行距, 行 高 


等 概念 ,这 些 概 念 和 中 文 不 同 ,区 别 如 图 3-5 所 示 。 


| 
中 里 (miagie tne) 行 高 ;160px 
基线 (base ne) 
话 线 (bottom lne) | 


图 3-5 CSS 概念 与 中 文 的 区 别 


内 容 区 是 指 底线 和 顶 线 包 右 的 区 域 (行内 元 素 display: inline 可 以 通过 background- 
color 属性 显示 出 来 ) ,实际 中 不 一 定 看 得 到 ,但 确实 存在 。 内 容 区 的 大 小 依据 font-size 的 值 
和 字数 进行 变化 。 行 高 (line-height) : 包括 内 容 区 与 以 内 容 区 为 基础 对 称 拓展 的 空白 区 域 ， 
我 们 称 之 为 行 高 。 一 般 情况 下 ,也 可 以 认为 是 相 邻 文本 行 基线 间 的 距离 。 行 距 则 是 指 相 邻 
文本 行 间 上 一 个 文本 行 基线 和 下 一 文本 行 顶 线 之 间 的 距离 ,也 就 是 : (上 文本 行 行 高 -内 容 
区 高 度 )/ 2 十 (下 文本 行 行 高 -内 容 区 高 度 )/2 的 值 。 

此 外 ,因为 元 素 的 输出 有 行 的 概念 ,同一 行内 的 元 素 不 一 定 高 度 相同 ,这 样 就 有 了 行内 
框 和 行 框 的 概念 。 行 内 框 是 一 个 浏览 器 泻 染 模 型 中 的 一 个 概念 ,无 法 显示 出 来 ,但 是 它 又 确 
实 存在 , 它 的 高 度 就 是 行 高 指定 的 高 度 。 行 框 (line box) 是 指 本 行 的 一 个 虚拟 的 矩形 框 , 也 是 
浏览 器 泻 染 模式 中 的 一 个 概念 。 行 框 高 度 等 于 本 行内 所 有 元 素 中 行内 框 最 大 的 值 ( 以 行 高 值 
最 大 的 行内 框 为 基准 ,其 他 行内 框 采 用 自己 的 对 齐 方式 向 基准 对 齐 ,最 终 计算 行 框 的 高 度 ) 。 

在 CSS 3 中 ,增加 了 内 容 分 栏 显示 属性 。 例 如 ,将 网 页 分 为 三 栏 ,网 页 中 的 图 片 显示 在 
页 面 右上 角 , 代 码 如 下 : 

body{ columns:3;column - gap:0.5in;} 

img{float :pagetopright ;width:3gr;} 

其 中 ,body 部 分 声明 页 面 为 3 栏 , 栏 间距 为 0.5 英寸 ; img 中 float 属性 指明 图 片 浮动 
位 置 为 页 面 的 右上 角 , 而 宽度 为 3 个 栏 宽 。 

8. 用 户 界面 属性 

在 CSS 规范 中 ,除了 上 述 列 出 的 几 大 类 CSS 属性 外 ,还 有 一 些 属性 不 好 归 类 ,例如 鼠标 
状态 ,元 素 的 显示 设置 等 ,我 们 将 这 些 CSS 属性 列 为 其 他 属性 , 见 表 表 3-14。 

表 3-14 用 户 界面 属性 
属性 名 功 能 取 值 
hand( 手 形 ) .crosshair( 定 位 十 " 字 )、text( 文 本 “1" 形 )、wait( 等 待 )、 
help( 帮 助 )、move( 移 动 ), 以 及 表达 箭头 不 同 朝 向 的 鼠标 形状 








cursor 设置 指针 形状 





设置 对 象 外 的 线条 
outline 轮 廓 。outline 画 在 
border 外 面 


复合 属性 ,包括 outline-style .outline-width .outline-color 三 个 独立 属 





auto: 元 素 的 导航 焦点 顺序 由 客户 端 自动 分 配 。 

<number>: 设置 元 素 的 导航 焦点 顺序 。 若 某 元 素 的 该 值 等 于 1 则 
意味 着 该 元 素 最 先 被 导航 。 当 若干 个 元 素 的 nav-index 值 相同 时 ， 
则 按照 文档 的 先后 顺序 进行 导航 

可 设置 对 象 全 模型 组 成 content-box: padding 和 border 不 被 包含 在 定义 的 width 和 height 
box-sizing 之 内 。 

模式 border-box: padding 和 border 被 包含 在 定义 的 width 和 height 之 内 
normal: 使 用 对 象 的 实际 尺寸 。< number >: 定义 缩放 比例 。 
< percentage>: 定义 缩放 百分比 

none: 不 允许 用 户 调整 元 素 大 小 。 

both: 用 户 可 以 调节 元 素 的 宽度 和 高 度 。 

horizontal: 用 户 可 以 调节 元 素 的 宽度 。 

vertical: 用 户 可 以 调节 元 素 的 高 度 


nav-index | 设置 对 象 导航 顺序 








Zoom 设置 对 象 缩放 比例 





设置 对 象 区 域 是 否 允 
resize 许 用 户 缩放 ,调节 元 
素 尺寸 大 小 
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利用 鼠标 形状 ,可 以 很 容易 地 模拟 一 个 超 链 接 ,或 者 按钮 等 输入 元 素 , 例 如 : 


< span style = "cursor:hand;color: #0000ff" onclick = "window. location = 'aaa. htm'"> 单 击 进入 
</span> 


在 对 象 盒 模型 中 , 如果 设置 为 content-box, 对 象 的 实际 宽度 等 于 设置 的 width 值 和 
border 、. padding 之 和 , 即 ( Element width = width 十 border 十 padding ) 。 
例如 : 


.test1{ 
box— sizing:content — box; 
width:200px; 
padding:10px; 
border:15px solid # eee; 

} 


则 元 素 宽度 为 200 十 10X2 十 15X2 王 250, 定 义 如 图 3-6(a) 所 示 。 
若 设置 为 border-box, 定 义 如 下 : 


.test2 { 
box - sizing:border - box; 
width:200px; 
padding:10px; 
border:15px solid # eee; 
} 


则 元 素 宽度 为 200, 定 义 如 图 3-6(b) 所 示 。 





(a) content-box (b) border-box 


图 3-6 ”对 象 盒 模型 示例 


3.3.3 样式 表 


在 CSS 出 现 以 前 ,修改 标记 的 默认 显示 样式 只 能 通过 设置 标记 相应 的 属性 来 实现 。 这 
种 修改 是 有 限 的 ,对 标记 显示 样式 的 定义 不 够 精细 ,这 催生 了 CSS 技术 的 出 现 。 在 前 面 我 
们 已 经 看 到 了 CSS 规范 中 预定 义 的 样式 属性 ,这些 属性 是 如 何 作用 于 标记 的 呢 ? 这 就 是 样 
式 表 和 选择 器 的 概念 。 在 前 面 学 习 HTML 时 ,我 们 知道 ,虽然 不 同 的 标记 有 不 一 样 的 标记 
属性 ,但 是 有 些 属 性 是 几乎 所 有 的 标记 都 有 的 , 称 为 通用 属性 ,例如 : id 属性 ,name 属性 ， 
style 属性 和 class 属性 ,其 中 style 属性 和 class 属性 就 是 CSS 样式 控制 标记 显示 的 手段 。 

要 控制 一 个 标记 的 显示 样式 ,往往 需要 通过 设置 多 个 CSS 样式 属性 来 完成 ,我 们 把 一 
组 CSS 样式 属性 的 集合 称 为 一 个 样式 表 (Style Sheet) 。 定 义 样 式 表 的 目的 就 是 将 样式 表 应 





用 于 特定 的 文档 对 象 ,以 修改 元 素 的 默认 显示 样式 。 对 哪些 文档 元 素 应 用 自 定义 的 样式 表 
呢 ? 我 们 把 选取 要 应 用 样式 表 的 对 象 的 规则 称 为 选择 器 (Selector) 。 

通常 情况 下 ,样式 表 是 在 HTML 文档 的 头 部 定义 的 ,通过 < style > 标记 进行 定义 ,样式 
表 定 义 的 一 般 形式 是 : 

< style type = "text/css"> 


选择 器 {CSS 属性 名 :属性 值 ; CSs 属性 名 :属性 值 ; … } 
</style> 


样式 表 的 书写 有 两 种 形式 ,如 果 CSS 属性 较 多 ,可 以 分 成 多 行书 写 ,形式 如 下 : 


<style type = "text/css"> 
选择 器 { 
Css 属性 名 :属性 值 ; 
Css 属性 名 :属性 值 ; 


} 

</style> 

通常 情况 下 ,样式 表 有 三 种 应 用 情况 ,分 别 是 : 在 标记 内 通过 style 标记 属性 定义 样 
式 表 , 称 为 内 联 样式 。 回 在 文档 头 部 ,在 < style ></style > 内 定义 样式 , 称 为 内 部 样式 。 
图 在 样式 文件 中 定义 样式 , 称 为 外 部 样式 。 对 于 内 部 样式 和 外 部 样式 ,需要 使 用 选择 器 应 用 
样式 ,常用 的 选择 器 为 class 选择 器 和 id 选择 器 , 即 设置 标记 的 class 属性 或 id 属性 来 使 用 
相应 的 样式 表 定 义 。 
3.3.4 选择 器 

在 样式 表 定义 中 ,我 们 已 经 看 到 选择 器 (Selector) 就 是 根据 一 定 的 规则 在 HTML 文档 
中 选取 特定 的 元 素 。 选 择 器 通常 和 一 个 样式 表 关 联 ,从 而 将 样式 表 应 用 到 选取 的 元 素 上 。 
在 CSS 中 ,根据 选取 文档 对 象 方法 的 不 同 ,选择 器 通常 分 为 以 下 五 大 类 。 

1， 元 素 选择 器 

元 素 选择 器 就 是 根据 特定 的 规则 选取 文档 元 素 , 分 为 4 种 使 用 形式 , 见 表 3-15 。 

表 3-15 “元素 选择 器 














选 择 器 功 能 
SN 选取 文档 中 的 所 有 元 素 
HTML ¥ 

re 根据 元 素 标记 名 (对 象 类 型 ) 选 择 文档 中 的 元 素 
这 选择 器 ee 、 
a 按照 元 素 id 属性 选取 对 象 
class 选择 器 


按照 元 素 class 属性 选取 对 象 





[LE]. myclass 


本 质 上 讲 ,元素 选 择 器 就 是 要 选取 特定 的 HTML 元 素 , 在 选取 的 元 素 上 应 用 样式 。 例 
如 ,x {color: 并 f00;}, 则 文档 中 的 所 有 文本 均 显 示 为 红色 。 在 文档 对 象 类 型 选择 器 中 ,其 
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中 ,也 为 HTML 标记 名 , 即 文档 元 素 类 型 。 此 时 标记 的 显示 样式 将 由 样式 表 和 标记 的 默认 
显示 共同 决定 ,如 果 样 式 表 样式 和 上 默认 样式 冲突 ,以 样式 表 定义 显示 。 

任何 HTML 标记 都 可 以 用 作 CSS 选择 器 ,例如 ,要 修改 文档 中 hl 元 素 和 p 元 素 的 默 
认 显 示 ,p 元 素 设置 首 行 缩 进 2 个 字符 ,行距 为 1. 5 倍 行距 , 则 样式 表 代 码 如 下 : 

< style type = "text/css"> 

hl{font — size:20px;} 
p{text - indent:2em;line - height:150% ; } 

</style> 

上 述 样式 表 定 义 后 ,新 的 样式 表 将 应 用 于 文档 中 所 有 的 p 元 素 ,hl 元 素 的 字体 
为 20px。 

在 id 选择 器 和 class 选择 器 中 , 方 括号 [Ej 为 可 选 部 分 2。 当 不 包含 [EJ 时 , 意 为 在 整个 
文档 中 ,按照 id 属性 或 class 属性 取 值 选取 对 象 ,并 应 用 样式 表 。 当 包含 [Ej 部 分 时 ,只 是 在 
下 对象 中 选取 对 象 ,限定 了 选取 对 象 的 范围 ,或 者 说 应 用 样式 表 元 素 的 范围 。 

例如 : 

<style> 

#title{font — size:20px;} 
p# content{ font - size:13px;} 

</style> 

<hl id = "title"> 标 题 </hl > 

<p id= "content"> 正 文 内 容 </p> 

在 四 类 元 素 选 择 符 中 ,id 选择 器 和 class 选择 器 非常 相似 。 通 常情 况 下 ,由 于 标记 的 id 
属性 通常 用 于 标识 唯一 对 象 ,因此 ,在 实际 应 用 时 ,经 常 使 用 class 选择 器 ,标记 的 class 属性 
又 称 为 样式 类 属性 。 

2. 关系 选择 器 

所 谓 关 系 选 择 器 ,就 是 在 一 类 特定 对 象 下 中 ,根据 相关 规则 ,选取 文档 对 象 FE。 有 四 种 
不 同 的 使 用 方式 , 见 表 3-16 。 

表 3-16 关系 选择 器 














选 择 器 功 能 

ei 选择 所 有 被 玉 元 素 包 含 的 元素 

0 选择 所 有 作为 元素 的 子 元 素 下 

ee 选择 紧 贴 在 下 元 素 之 后 的 下 元 素 
E+F 

0 选择 元 素 后 面 的 所 有 兄弟 元 素 





@ 在 计算 机 相关 的 语法 描述 中 , 方 括号 ([]) 一 般 用 于 标明 内 容 可 选 , 尖 括 号 (<>) 表 示 里 面 的 内 容 为 用 户 输入 , 竖 
线 (|) 代 表 或 关系 。 在 写 具 体内 容 时 ,这 些 符 号 本 身 不 需要 书写 。 


关联 选择 器 是 由 两 个 或 更 多 的 单个 选择 器 组 成 的 串 。 关 联 选 择 器 选取 选择 器 的 最 内 层 
元 素 起 作用 ,对 单独 的 外 层 元 素 无 定义 。 定 义 关 联 选择 器 时 ,选择 符 之 间 用 空格 分 开 。 

例如 : table a{color:red;} 

它 定 义 了 < table > 内 < a > 标记 的 样式 ,对 于 < table > 标记 本 身 ,以 及 < table > 标记 外 的 
<a> 标 记 没 有 影响 。 

如 果 网 页 中 有 两 个 表格 ,要 修改 一 个 表格 中 单元 格 样式 呢 ? 可 使 用 关联 选择 器 或 子 元 
素 选 择 器 。 首 先 根据 使 用 id 选择 器 或 class 选择 器 ,选择 其 中 一 个 表格 ,再 选择 表格 内 的 
行 、 行 内 的 标题 单元 格 和 普通 单元 格 ,进行 样式 表 定 义 。 对 表格 tablel 设置 ,代码 如 下 ， 


.tablel { 
width:100 %; 
border - collapse: collapse; /x 合并 边框 间 际 * / 


empty — cells: show; 

} 

.tablel tr{ /x* 行 高 */ 
height:35px; 

} 

.tablel tr th{ /* 表 头 单元 格 * / 
border: 1px solid # fff; 
color:#fff; 
background: # 3992d0; 


} 

.tablel tr td{ /x 单元 格 */ 
padding — left:10px; 
text ~ align: left; 

} 


3. 属性 选择 器 
所 谓 属性 选择 器 ,就 是 根据 元 素 属性 的 取 值 选取 对 象 。 常 用 属性 选择 器 见 表 3-17。 


表 3-17 属性 选择 符 


ELatt] 选择 具有 att 属性 的 下 元 素 

ELatt= "val"] 选择 具有 att 属性 且 属 性 值 等 于 val 的 E 元 素 

ELatt 一 = 一"val"] | 选择 具有 att 属性 且 属 性 值 为 用 空格 分 隔 的 字 词 列表 ,其 中 一 个 等 于 val 的 下 元 素 
ELatt ^="val"] 选择 具有 att 属性 且 属 性 值 为 以 val 开头 的 字符 串 的 下 元 素 

ELatt $ 一"val"] 选择 具有 att 属性 且 属 性 值 为 以 val 结尾 的 字符 串 的 王 元 素 

ELattx 二 "val"] | 选择 具有 att 属性 且 属 性 值 为 包含 val 的 字符 串 的 下 元 素 

ELatt|= "val"] 选择 具有 att 属性 且 属 性 值 为 以 val 开头 并 用 连接 符 " 一 "分 隔 的 字符 串 的 王 元 素 


























利用 属性 选择 器 ,可 以 根据 元 素 的 属性 取 值 情况 来 选取 特定 的 元 素 。 例 如 ,选取 文档 
中 ,具有 class 属性 值 为 comment 的 单元 格 ,选择 符 为 : td[Lclass 二 "comment" ], 则 文档 中 所 
有 设置 了 class 二 "comment" 的 td 对 象 被 选中 。 如 果 有 多 个 表格 ,也 可 以 查找 某 个 表格 , 例 
如 ,选取 tabll 中 的 单元 格 ,选择 符 为 : . tablel td[ class 二 "comment" |。 
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4. 伪 类 选择 器 

在 CSS 中 ,选择 器 的 本 质 就 是 从 文档 对 象 树 (Document Object Model,DOM) 中 选取 特 
定 的 对 象 。 有 些 对 象 有 不 同 的 状态 ,例如 , 超 链 接 < a > 元 素 , 就 有 未 被 访问 前 、 已 访问 过 、 鼠 
标 悬 停 等 不 同 状 态 。 如 何 来 精细 地 控制 同一 对 象 不 同 的 状态 呢 ? 我 们 把 这 样 的 选择 器 称 为 
伪 类 选择 器 ,常用 的 伪 类 选择 器 见 表 3-18 。 


表 3-18 常用 伪 类 选择 器 



































选 择 器 功 能 
E:link 超 链接 a 在 未 被 访问 前 的 样式 
E:visited 超 链接 a 在 其 链接 地 址 已 被 访问 过 时 的 样式 
E:hover 元 素 在 其 鼠标 悬 停 时 的 样式 
El:active 元 素 在 被 用 户 激活 (在 鼠标 单 击 与 释放 之 间 发 生 的 事件 ) 时 的 样式 
E:focus 元 素 在 成 为 输入 焦点 (该 元 素 的 onfocus 事件 发 生 ) 时 的 样式 
E:not(s) 匹配 不 含有 s 选择 器 的 元 素 EE 
E:root 匹配 耻 元 素 在 文档 的 根 元素 。 在 HTML 中 , 根 元 素 永远 是 HTML 
E:first-child 匹配 父 元 素 的 第 一 个 子 元 素 下 
E:last-child 匹配 父 元 素 的 最 后 一 个 子 元 素 EE 
E:nth-child(n) 匹配 父 元 素 的 第 n 个 子 元 素 E 
E:nth-last-child(n) 匹配 父 元 素 的 倒数 第 n 个 子 元 素 下 





在 HTML 中 ,最 常用 的 伪 类 选择 器 是 <a > 标记 的 定义 ,一 个 超 链 接 可 以 分 为 四 种 状 
态 ,分别 是 : a:link, 未 访问 链接 ; @a:visited, 已 访问 链接 ; @a: hover, 鼠标 移 到 链接 上 
时 ; @a:active, 激 活 时 , 即 链接 获得 焦点 时 。 对 应 超 链 接 的 不 同 状 态 , 可 以 分 别 定义 不 同 的 
显示 样式 。 例 如 ,要 个 性 化 超 链 接 的 显示 ,可 以 定义 下 面 的 样式 : 
< style type = "text/css"> 
a {font - size:17px; text - decoration:none} 
a:link{color: #0000FF;} 
a:visited{color: #0000FF;} 
a:hover {color: # FF0000;font - weight:bold;} 
a:active {color: # 0000FF;} 
</style> 


这 样 ,对 于 文档 中 < a > 标记 定义 的 超 链接 ,文字 显示 为 蓝 色 .无 下 面 线 。 当 鼠标 指向 的 
时 候 则 显示 红色 ,同时 字体 也 加 粗 显 示 。 对 于 访问 过 的 页 面 , 超 链接 显示 为 蓝 色 。 

特别 说 明 : 在 CSS 定义 中 ,a:hover 必须 位 于 a:link 和 a:visited 之 后 ,才能 生效 ; a: 
active 必须 位 于 a:hover 之 后 ,才能 生效 。 

除了 a 元 素 , 很 多 情况 下 也 可 以 使 用 伪 类 选择 符 , 例 如 ,有 很 多 p 元 素 , 选 择 符 p:not 
(.abc) 的 功能 是 选取 那些 class! 王 "abc" 的 p 元 素 。 

5. 伪 对 象 选 择 器 

伪 对 象 选择 器 就 是 在 所 选 对 象 内 ,对 特定 部 分 的 选择 。 当 然 ,我 们 可 以 把 这 些 特定 的 部 
分 进行 单独 的 标记 ,这 样 会 增加 标记 的 数量 ,但 选择 方便 。 在 CSS 中 , 伪 对 象 选择 器 可 以 对 
一 个 对 象 的 一 个 部 分 进行 选择 , 称 为 伪 对 象 选 择 器 ,常用 的 伪 对 象 选择 器 见 表 3-19。 


表 3-19 常用 伪 对 象 选择 器 
功 能 





E:first-letter/E: :first-letter 


对 象 内 第 一 个 字符 的 样式 , 仅 作用 于 块 对 象 





E:first-line/E: :first-line 


对 象 内 第 一 行 的 样式 





E:before/E: :before 


在 对 象 前 (依据 对 象 树 的 逻辑 结构 ) 发 生 的 内 容 , 和 content 属性 一 起 使 用 





E:after/E: :after 





在 对 象 后 (依据 对 象 树 的 逻辑 结构 ) 发 生 的 内 容 , 和 content 属性 一 起 使 用 








E: :selection 


在 伪 对 象 选 择 器 中 ,E: 


对 象 被 选择 时 的 颜色 


first-letter 伪 对 象 选择 器 常 被 用 来 配合 font-size 属性 和 float 属 


性 制作 段落 的 首 字 下 沉 效 果 。 例 如 : 


p{width:200px;border: 1p: 


x solid #ddd;font — size:14px} 


p:first- letter{float:left;font — size:40px; font — weight:bold;} 


p::selection{background 


: 井 000;color: 井 f007;} 


上 述 选择 符 将 使 得 p 元 素 内 的 文字 首 字符 下 沉 。 同 时 , 当 文 字 被 选中 后 文字 颜色 和 背 


景 发 生变 化 。 


最 后 ,为 了 简化 选择 符 的 书写 ,可 以 将 多 个 选择 符 共 用 一 个 样式 表 定 义 , 避 免 样式 表 定 
义 的 重复 , 即 定义 组 合 选择 符 。 定 义 组 合 选择 符 ,选择 符 之 间 用 西 文 ,” 分 隔 。 
例如 : hl ,h2{color:red} 


则 将 < hl > 标记 和 < h2 


3.3.5 函数 


> 标记 的 文本 颜色 定义 为 红色 。 


在 定义 样式 表 的 时 候 , 经 常会 遇 到 一 些 取 值 问题 ,例如 ,要 将 一 块 div 在 屏幕 窗口 居中 ， 
这 就 需要 知道 屏幕 的 高 度 和 宽度 。 关 于 许多 取 值 可 以 通过 JavaScript 程序 获得 , 除 此 之 外 ， 


在 CSS 中 ,也 提供 了 一 组 常 


用 的 函数 ,便于 CSS 设置 ,常用 函数 见 表 3-20 。 
表 3-20 CSS 常用 函数 














函 数 功 能 
calc(exp) 计算 表达 式 exp 的 值 ,支持 十 , 一 ，* ，/ ,mod 运算 
minCexpl ，expz,. .expn) 比较 数值 的 大 小 , 取 最 小 值 
max(expl ，expz ,. . expn) 比较 数值 的 大 小 , 取 最 大 值 


例如 : 定义 一 个 150px 


.test{ 
position:absolute; 


X50px 的 div, 并 居中 显示 .代码 如 下 : 


top:calc(50% — 25px); 
left:calc(50% 一 75px); 


width:150px; 
height:50px; 
background: # eee; 

} 

<div class = "test"> 大 小 


150px Xx 50px </div> 
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3.3.6 样式 表 文 件 


在 HTML 文档 的 头 部 ,在 < style ></style > 标记 内 定义 的 样式 表 , 只 能 应 用 于 当前 
HTML 文档 本 身 , 称 为 内 部 样式 。 如 果 要 将 这 些 样式 应 用 到 其 他 HTML 文档 中 ,应 该 使 用 样 
式 表 文 件 。 即 将 这 些 样式 表 定义 存储 在 一 个 扩展 名 为 . css 的 样式 表 文 件 中 , 称 为 外 部 样式 。 

样式 表 文 件 是 一 个 由 选择 器 样式 表 组 成 的 文本 文件 ,不 需要 < style > 标记 ,扩展 名 为 . css。 
然后 , 当 某 个 网 页 需要 使 用 其 中 的 样式 时 ,在 文档 的 < head >…</head > 中 通过 < link > 标记 
引入 样式 表 , 一 般 形式 如 下 : 


<link type = "text/css" rel = "stylesheet” href = "样式 表 文 件 URL"> 


这 样 ,在 当前 文档 中 ,就 可 以 使 用 所 引入 的 样式 表 文件 中 定义 的 样式 表 了 。 一 种 良好 的 
HTML 页 面 就 是 充分 利用 CSS 技术 ,将 页 面 的 显示 和 布局 分 开 , 从 而 保证 页 面 维护 的 灵活 性 。 

【 例 3-7】 设计 一 组 表格 样式 类 ,绘制 线 宽 为 1 的 表格 线 ,并 设计 表格 的 标题 行 单元 格 
( 即 < th >) 样 式 。 

分 析 : 在 HTML 中 ,表格 是 由 一 个 个 的 单元 格 构成 的 。 默 认 情 况 下 ,每 个 < table > 标记 
和 < td > 标记 都 有 边框 ,因此 ,即使 设置 < table > 标记 的 cellspacing 二 "0" ,表格 的 边框 也 是 两 
个 像素 的 线 宽 。 要 显示 一 个 像素 的 表格 线 , 可 以 为 table 设置 style 王 "border-collapse: 
collapse" 。 也 可 以 对 表格 和 单元 格 的 四 个 边框 设计 边框 CSS 属性 ,通过 边框 的 显示 与 否 来 
得 到 需要 的 效果 。 

(1) 样式 表 文 件 mytable. css 

代码 清单 : mytable. ess 


.table— hasframe 

{ 
margin ~ top:15px; 
border - left:1px solid #0163A2; 
border - bottom:1px solid #0163A2; 
font ~ size:12px; 
background — color: # FFFFEFF 

} 

.cell - title 

{ 
border - top: 1px solid #0163A2; 
border - right:1px solid #0163A2; 
font — weight:bold; 
text — indent :Opx; 
line— height:150%; 
text ~ align: center; 
vertical ~- align:nmiddle; 

} 

.cell - normal 

{ 
border — top: 1px solid #0163A2; 
border - right:1px solid #0163A2; 
padding — left:S5px; 
text — indent :0px; 
vertical ~- align:nmiddle; 


上 


在 上 述 的 CSS 文件 中 ,定义 一 个 表格 样式 ,定义 了 它 的 上 边框 \ 左 边框 和 下 边框 ,边框 
宽度 为 0, 则 不 显示 边框 。 两 种 单元 格 样式 类 都 定义 了 上 边框 和 右边 框 。 这 样 只 要 在 应 用 
上 述 样式 类 时 ,设置 < table > 的 cellspacing 王 "0", 即 可 实现 显示 1 个 像素 的 表格 线 。 

(2) 在 页 面 中 应 用 样式 表 文 件 

代码 清单 : mytable. htm 


<html > 
<head> 
<meta http - equiv= "Content - Type" content = "text/html; charset = gb2312"> 
<link rel = "stylesheet" type= "text/css" href = "mytable. css"> 
</head > 
<body> 
<table class= "table— hasframe" width= "100%" cellspacing= "0"> 
<tr height = "35"> 
<td width = "70" class = "cell - title"> 序 号 </td> 
<tdwidth="100"class = "cell - title"> 留 言 人 </td> 
<td class = "cell - title"> 标 题 </td> 
</tr> 
<tr height = "30"> 
<td class = "cell - normal" align = "center"> 1 </td> 
<td class = "cell - normal" align = "center"> 赵 一 平 </td> 
<td class = "cell - normal"> 在 CSS 中 ,利用 id 和 class 设置 标记 样式 有 什么 不 一 样 ?</td> 
</tr> 
<tr height = "30"> 
<td class = "cell - normal" align = "center"> 2 </td> 
<td class = "cell - normal" align = "center"> 郭 晶 </td> 
<td class = "cell - normal"> 如 何 设置 段落 的 行距 ?</td> 
</tr> 
</table> 
</body> 
</html > 


在 浏览 器 中 打开 上 述 页 面 ,显示 结果 如 图 3-7 所 示 。 


























3-7 一 个 像素 的 表格 线 表格 
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3.4 行内 元 素 与 块 元 素 


在 传统 的 字 处 理 器 中 ,一 个 文本 文档 有 行 与 列 的 概念 ,有 段落、 节 的 概念 ,HTML 文档 
也 不 例外 。 在 输出 (显示 )HTML 文档 时 ,浏览 器 也 是 对 文档 中 的 元 素 从 上 到 下 , 自 左 向 右 
一 个 个 输出 。 由 于 显示 器 等 输出 设备 的 宽度 所 限 , 所 有 的 内 容 不 可 能 在 一 行内 输出 ,这 就 会 
导致 换行 。 因 此 ,在 HTML 规范 中 ,根据 是 否 输出 换行 ,元 素 可 分 为 块 元 素 和 行内 元 素 两 
大 类 。 所 谓 行内 (Inline) 元 素 , 是 指 在 输出 前 后 不 换行 的 元 素 , 如 图 片 元 素 (< img >) 、 超 链 
接 元 素 (<a>) 等 。 所 谓 块 (Block) 元 素 , 就 是 指 在 元 素 输出 前 后 换行 的 元 素 , 如 段落 (<p >) 
元 素 、 表 格 (< table >) 元 素 、 表 单 (< form >) ,列表 (< ul>,<1i>) 等 。 

在 HTML 文档 的 输出 过 程 中 ,如 果 当 前 元 素 的 宽度 超出 了 输出 容器 的 宽度 , 则 会 自动 
换行 输出 ,这 和 字 处 理 器 中 段落 是 一 样 的 ,一 个 段落 可 能 会 包含 多 行 。 除 了 上 面谈 到 了 的 行 
内 元 素 和 块 元 素 外 ,在 页 面 布 局 和 控制 中 ,HTML 中 还 有 两 个 重要 的 元 素 , 即 块 元 素 < div > 
和 行内 元 素 < span >。 元 素 的 行内 输出 和 块 级 输出 不 是 固定 不 变 的 ,通过 CSS 的 display 属 
性 和 float 属性 可 以 互相 改变 。 


3.4.1 区 段 标记 <Span> 


在 页 面 设计 和 控制 中 ,有 时 候 我 们 要 对 页 面 上 的 一 个 部 分 进行 控制 ,例如 ,对 一 个 p 元 
素 的 一 部 分 进行 处 理 ,而 不 是 p 元 素 的 全 部 内 容 。 这 种 局 部 的 处 理 可 能 是 设置 特定 的 显示 
样式 ,或 者 单独 的 处 理 程序 。 如 何 来 完成 这 样 的 需求 呢 ? 

我 们 知道 , 当 浏 览 器 打开 一 个 网 页 的 时 候 , 对 于 网 页 中 的 每 一 个 元 素 浏览 器 都 会 在 内 存 
中 创建 一 个 DOM 对 象 ,我 们 可 以 通过 客户 端 脚本 程序 对 这 些 内 存 对 象 进行 操作 。 因 此 , 理 
论 上 讲 , 只 要 将 要 处 理 的 部 分 标记 为 一 个 独立 的 元 素 ,就 可 以 对 它 进 行 处 理 了 。 

为 此 ,在 HTML 中 ,定义 了 一 个 行内 元 素 , 即 区 段 标记 < span >。 标 记 < span > 没有 默 
认 的 显示 样式 ,可 以 说 ,定义 该 标记 的 主要 目的 是 标记 特定 内 容 , 从 而 创建 文档 对 象 ,以 便 通 
过 客户 端 脚本 程序 或 CSS 实现 对 文档 内 容 的 精细 控制 。 可 以 说 ,< span > 标记 的 强大 功能 
都 是 通过 CSS 和 脚本 程序 实现 的 。 

【 例 3-8】 < span > 标记 应 用 示例 。 

分 析 : 在 Web 应 用 的 开发 中 ,有 时 候 需 要 动态 地 改变 页 面 上 一 些 地 方 的 内 容 , 例 如 单 
元 格 、 文 本 内 部 等 。 对 于 单元 格 , 它 是 由 < td > 标记 定义 的 ,因此 可 以 访问 ,但 如 果 是 一 段 文 
本 的 一 部 分 , 则 没有 特别 的 标记 就 无 法 访问 了 ,此 时 ,可 使 用 < span > 标记 标记 需要 操作 的 
文本 。 

示例 代码 如 下 : 

代码 清单 : exa3-10 . htm 

<html> 

<head> 

<meta http - equiv= "Content - Type" content = "text/html; charset = gb2312"> 

<script language = "javascript"> 


// 参 数 strid: span 对 象 id 字符 串 


function setspan(strid, flag) 





if(flag==1) 
{ 
// 求 对 应 的 span 元 素 内 存 对 象 ,为 对 象 属性 赋值 
obj = document. getElementById( strid) ; 
obj. innerHTML = "< font color = red size = 5> Hao </font >"; 
// 直 接 使 用 < span > 标记 的 id 访问 对 象 
sp2. style. display = "inline"; 
sp3. style. display = "none"; 
} 
if(flag== 2) 
{ 
document. all. item( strid). innerHTML = "< font color = red> Ma </font >"; 
sp2. style. display = "none"; 
sp3. style. display = "inline"; 
} 
} 
</script > 
</head > 
<body > 
<a href = "javascript: setspan( 'spl',1)">Mr.Hao </a> | 
< span onclick = "setspan( 'spl',2)" style = "cursor:hand;color:#0000ff">Miss.</span> 
< span style = "color: #0000FF">Ma </span></br> 
<p> 亲 爱 的 < span id = "spl"></span>< span id = "sp2" style = "display:none"> 先 生 </span> 
< span id = "sp3" style = "display:none"> 女 士 </span></p> 
</body > 
</html > 


在 上 述 代码 中 ,我 们 展示 了 span 元 素 的 不 同 用 法 ,包括 模拟 一 个 超 链接 ,显示 或 改变 其 
内 容 。 为 了 展示 客户 端 脚本 程序 的 功能 的 多 样 性 ,对 一 个 span 元 素 的 访问 我 们 使 用 了 不 同 
的 方法 ,在 实际 研发 中 ,只 要 保证 可 读 性 就 好 。 

运行 上 述 代码 ,显示 结果 如 图 3-8 所 示 。 








le. Hao | Niss. la Nr. Hao | Niss.¥a lr. Hao | Niss. Na 
亲爱 的 亲 受 的 Hao 先 生 亲爱 的 la 女士 
(a) 初始 页 面 (b) 单 击 *Mr.Hao™ (c) 单 击 *Miss.Ma” 


图 3-8 < span > 标记 应 用 


3.4.2 块 标记 < div > 


在 HTML 中 ,由 于 页 面 布局 的 需要 ,经 常 需要 将 网 页 中 的 一 个 矩形 区 域 的 内 容 作为 一 
个 整体 标记 出 来 ,这 就 是 块 标记 < div > 的 功能 。 块 标记 < div > 用 于 定义 网 页 上 的 一 个 矩形 
块 ,中 间 可 以 包含 引起 行 中 断 的 元 素 , 如 p 元 素 table 元 素 等 。 默 认 情 况 下 ,< div > 是 一 个 
块 级 (Block) 元 素 ,在 输出 前 后 会 产生 换行 , 且 不 对 所 标记 的 内 容 做 任何 形式 的 格式 化 泻 染 ， 
要 控制 这 个 区 域 的 位 置 、 显 示 及 各 种 效果 ,需要 通过 定义 CSS 样式 属性 来 实现 。 
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定义 块 的 一 般 形 式 是 : 

<div id=" " style=" "> 

</div> 

主要 属性 有 : 

。 id 属性 ,用 于 标识 一 个 < div > 块 .客户 端 脚 本 程序 通过 id 可 以 引用 该 块 或 对 块 进行 

操作 。 

。 style 属性 ,定义 块 的 位 置 、 大 小 、 显 示 等 CSS 样式 表 。 

此 外 ,< div > 标记 还 可 以 接受 onclick 等 鼠标 事件 ,来 增加 交互 功能 。 

在 通常 情况 下 ,在 网 页 上 ,我 们 可 以 将 一 个 区 域 用 < div > </div > 标记 来 定义 一 个 矩形 
区 域 , 即 定义 一 个 区 域 块 ,通过 块 的 style 属性 操作 ,来 得 到 一 些 特殊 的 显示 效果 。 块 标记 的 
主要 用 处 就 是 页 面 布局 ,也 可 以 通过 定义 块 ,通过 客户 端 程序 ,来 实现 对 区 域 块 的 显示 、 隐 藏 
和 移动 等 操作 ,实现 树 状 菜单 等 特殊 的 客户 端 效 果 。 

【 例 3-9】 块 的 显示 或 隐藏 。 

分 析 : 在 许多 Web 应 用 系统 的 页 面 设 计 中 ,通常 使 用 区 域 块 来 显示 一 些 帮助 信息 , 通 
过 单 击 来 显示 或 隐藏 区 域 块 。 例 如 ,我 们 在 开发 GSL 系统 时 ,设计 的 页 面 如 图 3-9 所 示 。 


息 的 位 置 ， 教 学 计划 管理 > 数学 计划 列表 


ee 





系统 寿 助 : 
一 项 教学 计划 对 庙 一 个 数学 狂 ， 教 学 昔 叮 以 包括 多 个 不 间 的 物理 班 ， 对 于 选修 课 ， 一 个 教学 计划 的 才学 更 , | 
学 计划 号 = 课程 代码 + 课程 怖 序号 


分 同 笔 。 扫 一 个 教学 计划 孝 有 一 个 唯一 的 教学 计 汶 1， 数 





图 3-9 区 域 块 的 显示 和 隐藏 设计 


当 用 户 在 “教学 计划 列表 "文本 上 单 击 时 ,显示 “系统 帮助 "区域 块 ,再 次 单 击 ,隐藏 该 区 
域 块 。 示 例 代码 如 下 : 
代码 清单 : 


< html > 
<head > 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 
<1link rel = "stylesheet" type = "text/css" href = "pubcss/linestable.css"> 
<link rel = "stylesheet" type = "text/css" href = "pubcss/common. css"> 
< script language = "javascript"> 
function showorhide div(id) 
{ 
if (document. al1. iem( id). style. display == "none" ) 
document. al1. item( jd). style. display = "block"; 
else 
document.all. item( id). style. display = “none"; 
} 
</script > 


</head > 
<body > 
<table class = "location- table" width= "97% "> 
<tr height = "35"> 
<td class = "location -title" colspan = "2"> 您 的 位 置 : 教学 计划 管理 >> 
<a href =" 井 ”onclick= "showorhide div('helpdiv')"> 教 学 计划 列表 </a> 
</td> 
/try 
<tr height = "35"> 
<tdalign= "right"> 
<a href = "addbook - groupslist. jsp"> 添 加 班级 </a> | 
<a href = "addbook - personadd. jsp"> 添 加 单个 学 生 </a> 
</td> 
</tr> 
</table> 
<div id = "helpdiv" style= "border:0px solid #0163A2;padding:5px;display:none"> 
<table style= "width:97 % ;margin— bottom:20px" cellpadding = "0" border = "0"> 
<tr height = "20"> 
<td class = "menuposword" width= "97%" align= "left"> 系 统 帮 助 : </td> 
<td rowspan = "2"><a href = "#" onclick = "showorhide div('helpdiv')">? </a> <td> 
</tr> 
<tr class = "bannerword" height = "20"> 
<td align = "left"> 一 项 教学 计划 对 应 一 个 教学 班 ,教学 班 可 以 包括 多 个 不 同 的 自然 班 ; 对 于 选 
修 课 ,一 个 教学 计划 的 教学 班 ,可 以 是 某 些 班 的 部 分 同学 .每 一 个 教学 计划 都 有 一 个 唯一 的 教学 计划 
号 ,教学 计划 号 = 课程 代码 + 课程 顺序 号 . 
</td> 
</tr> 
</table> 
</div> 
<table id= "tablel" width= "97%" border = "1"> 
<tr> 
<td> </td> 
<td> </td> 
</tr> 
</table> 
</body> 
</html > 


上 述 代码 中 ,涉及 了 脚本 程序 和 CSS 技术 .这 在 接 下 来 的 小 节 中 介绍 。 在 默认 状态 下 ， 
div 占 整 个 窗口 宽度 ,高 度 由 所 包含 的 内 容 确定 , 且 不 显示 div 块 的 边框 ,这 可 以 设置 style 一 
"border:1px solid #0163A2" 来 显示 区 域 块 的 边框 ,以 便 对 区 域 块 有 个 更 直观 的 认识 。 


3.4.3 输出 形式 转换 


在 HTML 中 ,所 有 元 素 都 可 归 为 行内 元 素 或 块 元 素 。 在 默认 情况 下 ,行内 元 素 输出 前 
后 不 产生 换行 , 块 元 素 在 输出 前 后 会 自动 换行 。 一 个 元 素 的 输出 是 否 换行 不 是 固定 不 变 的 ， 
可 以 通过 CSS 属性 display 和 float 进行 改变 ,例如 : 可 以 将 段落 (< p >) 元 素 设置 为 行内 输 











万 ITM 与 XML 基础 


圩 避 蛋 


Web 技术 时 论 ( 第 4 版 ) 





出 , 既 可 以 让 div 元素 前 后 自动 换行 输出 ,也 可 以 设置 为 不 换行 输出 。 

【 例 3-10】 使 用 列表 元 素 创建 水 平 菜单 。 

分 析 : 通常 情况 下 ,列表 元 素 通 常用 于 内 容 的 列表 显示 中 , 除 此 之 外 ,通过 CSS 样式 ,将 
列表 项 水 平 排列 ,可 以 构造 一 个 单行 的 水 平 菜单 。 


<html> 
<head> 
<style type= "text/css"> 
ul{ 
list— style- type:none; 
width:100 %; 
padding:0; 
margin:0; 
float:left; 
} 
li{display: inline;} 
al 
width: 10em; /* 设置 菜单 项 宽度 为 当前 字体 尺寸 的 10 倍 , 即 10 个 字符 * / 
color:white; 
background - color: purple; 
text ~ decoration: none; 
padding:0.2em 0. 6em; 
border - right:1px solid white; / * 超 链接 块 右 边框 */ 
float: left; 
} 
a:hover{background - color: # ff3300} 
</style> 
</head > 
<body> 
<ul> 
<1i><a href ="#">Link one </a></1i> 
<1i><a href ="#">Link two </a></1i> 
<1i><a href ="#">Link three</a></1i> 
</ul> 
<p> 将 超 链 接 元 素 a 的 CSS 属性 设置 在 1i 元 素 中 ,看 上 去 逻辑 更 清晰 ,实现 的 效果 一 样 吗 ?</p> 
</body> 
</html > 


默认 状态 下 ,列表 元 素 (< ul >,<1li>) 属 于 块 元 素 , 在 输出 前 后 均 会 自动 换行 。 在 ul 元 
素 的 属性 设置 中 ,设置 CSS 属性 float: left, 则 ul 元 素 改变 为 行内 元 素 输出 ,width: 100% 
因 当 前 行 没有 剩余 空间 , 则 使 得 后 面 的 输出 元 素 被 输出 到 下 一 行 。 此 时 ,还 需要 设置 
padding 和 margin 为 0, 和 否则 将 出 现 水 平 滚动 条 ,因为 加 上 padding 和 margin 会 超过 
100%。 元 素 li 是 ul 元 素 的 子 元 素 ,设置 display: inline 则 1i 输 出 按 行内 元 素 输出 , 即 列表 
项 水 平 显 示 。 

对 于 a 元 素 , 为 什么 要 设置 float 属性 呢 ? 在 菜单 中 ,我 们 设置 了 菜单 项 的 宽度 , 即 设 置 
了 a 元 素 的 width 属性 。 如 果 不 设置 float 属性 .a 元 素 输出 宽度 width 将 按照 实际 内 容 输 








出 ,并 且 在 不 同 的 a 元 素 输出 中 间 添 加 空格 。 在 上 述 代码 中 ,可 能 会 想到 将 a 元 素 的 CSS 定 
义 通过 1 定义 实现 更 好 理解 ,但 显示 效果 是 不 一 样 的 。 

在 网 页 布局 中 ,div 元 素 是 最 常用 的 元 素 之 一 。 在 默认 情况 下 ,div 输出 为 块 元 素 , 即 输 
出 前 后 会 自动 换行 。 通 过 display:inline 设置 可 以 将 div 输出 为 行内 元 素 , 也 可 以 设置 float 
属性 将 div 输出 为 行内 元 素 ,并 浮动 到 当前 行 的 左 侧 或 右 侧 。 例 如 ,有 下 列 代码 : 


<div style= "width:100px; border:1px solid # ff0000;display: inline;"> 
blockl 

</div> 

<div style= "width:100px; border:1px solid #0000ff;display: inline;"> 
block2 

</div> 

<div style= "width:100px;border:1px solid #ff0000;float:left;"> 
block3 

</div> 

<div style= "width:100px; border:1px solid #0000ff;float:right; "> 
block4 

</div> 


定义 了 4 个 div,4 个 block 将 输出 为 1 行 ,从 左 向 右 的 顺序 分 别 是 block3 .blockl 、 


block2 和 block4, 其 中 block4 浮动 到 行 的 最 右 侧 ,各 block 会 随 着 浏览 器 窗口 宽度 的 变化 
浮动 。 





3.5 页 面 布局 
对 于 一 个 网 页 ,我们 可 以 从 两 个 方面 来 认识 ,一 方面 是 网 页 文件 , 它 通过 标记 记录 了 网 


页 中 的 所 有 内 容 ; 另 一 方面 是 网 页 文件 在 浏览 器 窗口 中 的 显示 , 它 是 网 页 文件 内 容 在 显示 
屏幕 上 的 可 视 化 。 我 们 看 到 的 每 一 张 网 页 ,其 内 容 都 不 会 是 杂乱 无 章 毫 无 规则 地 摆 放 的 。 
所 谓 页 面 布局 (Layout) ,就 是 根据 一 定 的 原则 ,对 网 页 中 的 内 容 , 在 位 置 和 大 小 上 进行 设置 
和 控制 ,从 而 达到 特定 的 页 面 整 体 显示 效果 。 


3.5.1 网 页 内 容 输 出 流 


当 浏 览 器 下 载 了 一 个 网 页 ,打开 网 页 文件 时 ,对 文件 中 的 网 页 元 素 是 按照 流 的 方式 读 取 
并 以 输出 流 的 方式 在 浏览 器 窗口 显示 的 。 浏 览 器 按照 网 页 文件 中 的 书写 顺序 一 个 个 地 读 取 
网 页 元 素 (文本 、 图 片 . 超 链接 、 表 格 等 ), 然 后 根据 标记 ,对 这 些 元 素 在 浏览 器 窗口 中 确定 它 
的 位 置 和 尺寸 大 小 ,进行 显示 。 

默认 情况 下 ,网 页 元 素 在 窗口 中 自 上 而 下 , 自 左 向 右 顺序 输出 ,每 个 元 素 有 一 定 的 尺寸 
大 小 (高 度 、 宽 度 ) , 当 遇 到 窗口 边界 时 ,可 能 引起 元 素 输出 的 自动 换行 。 为 了 控制 输出 流 换 
行 ,在 HTML 中 也 定义 了 特定 的 标记 ,或 者 说 有 些 标记 有 换行 显示 的 默认 设置 。 

在 实际 应 用 中 ,可 能 一 个 网 页 元 素 (例如 ,一 张 图 片 ) 的 大 小 (宽度 或 高 度 ) 超 过 了 浏览 器 
窗口 的 大 小 ,一 般 情 况 下 ,浏览 器 窗口 会 出 现 水 平 或 垂直 滚动 条 ,以 便 用 户 能 够 看 到 窗口 外 
的 内 容 。 在 微机 等 桌面 设备 中 水平 滚 动 条 等 操作 是 方便 的 ,但 对 于 屏幕 较 小 的 智能 手机 或 
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平板 电脑 ,水 平 滚动 条 不 是 一 种 好 的 用 户 操作 体验 。 为 了 增强 用 户 体验 ,对 网 页 内 容 输出 的 
定位 和 尺寸 处 理 , 即 网 页 布局 就 显得 非常 重要 了 。 


3.5.2 定位 与 尺寸 


网 页 中 的 每 一 个 元 素 都 有 大 小 和 定位 问题 ,这 是 网 页 布局 的 两 个 方面 。 定 位 确定 了 网 
页 元 素 的 位 置 ,尺寸 确定 了 网 页 元 素 的 空间 大 小 。 

1. 尺寸 

网 页 元 素 的 大 小 包括 宽度 (width) 和 高 度 (height) 两 个 方向 ,设置 的 值 有 绝对 大 小 和 百 
分 比 两 种 。 百 分 比 是 相对 父 对 象 的 , 它 会 随 着 浏览 器 窗口 大 小 的 变化 而 变化 。 浏 览 器 窗口 
尺寸 的 改变 ,就 是 根 节点 HTML 长 宽 的 改变 ,可 以 用 百分比 将 元 素 尺 寸 和 浏览 器 尺寸 联系 
起 来 ,做 到 自 适应 。 

在 尺寸 值 设 置 中 ,除了 绝对 值 大 小 和 百分比 ,还 有 一 个 特定 的 值 auto,auto 是 很 多 尺寸 
值 的 默认 值 , 即 由 浏览 器 自动 计算 。 例 如 : 在 水 平方 向 , 若 块 元 素 (Block) 水 平方 向 尺寸 设 
置 为 auto, 则 块 级 元 素 的 margin、border、 padding 以 及 content 宽度 之 和 等 于 父 元 素 的 
width。 使 用 auto 属性 在 父 元 素 宽度 变化 的 时 候 , 该 元 素 的 宽度 也 会 随 之 变化 。 但 是 ,如 果 
该 元 素 被 设 为 浮动 时 ,该 元 素 的 width 则 是 内 容 的 宽度 ,由 内 容 撑 开 , 即 具有 包 庄 性 。 

在 高 度 方向 ,外 边 距 auto 为 0。 为 什么 margin: auto 不 能 计算 垂直 方向 的 值 呢 ? 很 简 
单 ,垂直 方向 是 被 设计 成 可 以 无 限 扩 展 的 , 即 内 容 的 高 度 是 无 限 的 ,内 容 越 多 浏览 器 便 产 生 
垂直 滚动 条 来 扩展 ,所 以 垂直 方向 都 找 不 到 一 个 计算 基准 ,以 此 返回 一 个 false, 即 0 值 。 

根据 上 述 分 析 , 在 HTML 中 ,对 于 所 有 的 网 页 元 素 , 通 过 width ,height 属性 控制 大 小 ， 
各 个 方向 的 margin 和 padding 值 控制 与 边界 或 者 其 他 元 素 的 距离 来 定位 。 通 过 将 margin 
和 padding 设 为 负 值 ,可 以 打破 网 页 元 素 的 正常 顺序 输出 ,使 得 一 个 元 素 和 其 他 元 素 释 加 ， 
或 子 元 素 输出 到 父 元 素 的 边界 以 外 , 即 产生 浮动 效果 。 例 如 , 左 、 中 、 右 三 个 div ,在 文档 中 ， 
根据 内 容 的 重要 程度 ,依次 书写 center, right,left, 然 后 把 最 后 书写 的 div 块 浮动 到 最 前 方 ， 
即 margin-left: calc( 一 100%-100px) 到 预定 位 置 。 

2. 位 置 

在 默认 情况 下 ,元 素 的 输出 都 是 从 上 到 小 、 自 左 向 右 顺序 输出 的 ,虽然 可 以 通过 设置 高 
度 和 宽度 ,以 及 显示 (display) 属 性 和 浮动 (float) 属 性 ,改变 元 素 的 显示 位 置 ,但 这 种 定位 是 
相对 的 。 此 外 ,还 可 以 设 定 (x,y) 坐 标 来 确定 网 页 元 素 的 位 置 ,这 就 是 绝对 定位 。 使 用 绝对 
定位 ,网 页 元 素 将 脱离 正常 的 输出 流 ,浮动 到 指定 的 绝对 位 置 。 


3.5.3 网 页 布局 类 型 


从 本 质 上 讲 , 页 面 布局 涉及 页 面 元 素 的 位 置 和 大 小 两 个 方面 。 同 一 个 网 页 ,在 不 同 的 浏 
览 器 窗口 中 ,网 页 的 显示 又 会 有 怎么 样 的 变化 呢 ? 今天 ,这 个 问题 更 加 突出 ,因为 电脑 屏幕 、 
平板 电脑 .智能 手机 的 显示 屏 大 小 悬殊 很 大 ,即使 是 同一 台 显 示 器 ,其 分 辩 率 的 设置 也 有 多 
种 选择 ,这 导致 了 同一 尺 才 的 图 片 等 网 页 元 素 ,在 不 同 的 显示 环境 ,显示 效果 不 同 。 

在 不 同 大 小 的 浏览 器 显示 窗口 ,我 们 总 是 希望 页 面 内 容 能 够 以 完整 .相对 良好 的 输出 顺 
序 来 显示 ,因此 ,从 技术 上 讲 , 网 页 的 布局 类 型 可 以 分 为 以 下 四 种 类 型 , 见 表 3-21 。 


表 3-21 网 页 布局 类 型 








页 面 元 素 
页 面 布 局 技术 特点 
位 置 | 尺寸 
静态 布局 不 变 | 不 恋 页 面 元 素 位 置 和 大 小 固定 , 当 内 容 超过 容器 或 窗口 宽度 时 ,会 出 现 
(Static Layout) 3 换行 .水 平 滚动 条 等 





流 式 布 局 


3 变 | 不 变 | 根据 窗口 宽度 和 网 页 元 素 的 宽度 ,自行 调整 网 页 元 素 输出 位 置 
(Liquid Layout) 





不 改变 网 页 元 素 在 水 平方 向 和 垂直 方向 的 相对 关系 , 即 固定 断 点 ， 
不 变 | 变 | 当 浏 览 器 窗口 变化 时 ,网 页 元 素 按照 浏览 器 宽度 自动 缩小 放大 ,以 
适应 窗口 的 变化 

分 别 为 不 同 的 屏幕 分 辩 率 定义 布局 ,同时 ,在 每 个 布局 中 ,应 用 流 
变 | 变 | 式 布局 (流体 网 格 ) 的 理念 , 即 页 面 元 素 宽度 随 着 窗口 调整 而 自动 
适 配 


自 适 应 布局 
(Adaptive Layout) 





响应 式 布局 


(Responsive Layout) 











在 传统 的 网 页 设计 中 ,布局 主要 考虑 的 是 显示 器 分 辩 率 大 小 的 不 同 。 现 在 ,因为 平 
板 电 脑 和 智能 手机 的 使 用 已 经 非常 广泛 ,网 页 布局 就 变 得 更 加 复杂 ,但 目标 是 一 样 的 ,就 
是 要 在 不 同 的 显示 器 窗口 大 小 ,或 者 改变 浏览 器 窗口 大 小 时 ,让 网 页 都 呈现 出 比较 满意 
的 效果 。 

在 HTML 5 以 前 ,很 多 网 站 的 解决 方法 就 是 为 不 同 的 设备 提供 不 同 的 网 页 ,分 别提 供 
电脑 版 和 手机 版 的 网 页 ,这 是 一 种 静态 布局 的 概念 ,固然 可 以 保证 显示 效果 ,但 要 制作 和 维 
护 多 个 版 本 ,工作 量 巨大 且 需 要 做 许多 重复 劳动 。 

因此 ,很 早 就 有 人 设想 ,能 不 能 “一 次 设计 ,普遍 适用 ” 呢 ? 让 同一 张 网 页 自动 适应 不 同 
大 小 的 屏幕 ,根据 屏幕 宽度 ,自动 调整 布局 (layout)。 在 CSS 3 中 ,通过 对 元 素 的 放大 和 缩 
小 显示 ,可 以 实现 这 种 自 适应 。 但 是 ,问题 依然 存在 , 那 就 是 如 果 网 页 元 素 ( 例 如 : 图 片 ) 原 
始 尺寸 和 窗口 要 适 配 的 大 小 悬殊 较 大 时 ,放大 缩小 的 效果 可 能 不 够 理想 。 

为 解决 移动 互联 网 浏览 问题 ,2010 年 5 月 ,Ethan Marcotte 提出 了 响应 式 布局 的 概念 ， 
融合 了 自 适应 布局 和 流 式 布局 的 理念 。 在 浏览 器 窗口 大 小 发 生变 化 时 ,页 面 元 素 的 位 置 和 
大 小 都 可 能 发 生变 化 。 保 证 网 页 能 够 兼容 多 种 显示 终端 ,而 不 是 为 每 个 终端 做 一 个 特定 的 
版 本 。 

在 HHTML/CSS 3 中 ,增加 了 许多 元 素 和 样式 属性 ,例如 Media Queries 响应 媒体 查询 
标签 可 以 判断 分 辩 率 大 小 ,执行 CSS 中 的 样式 代码 ,结合 JavaScript 脚本 程序 ,从 而 实现 自 
适应 布局 .响应 式 布 局 等 显示 效果 。 要 判断 一 个 网 页 是 否 能 够 自 适应 ,除了 分 别 使 用 电脑 、. 平 
板 和 手机 显示 网 页 外 ,也 可 以 在 电脑 显示 时 ,改变 浏览 器 窗口 的 大 小 ,查看 显示 效果 的 变化 。 

【 例 3-11】 进行 页 面 布局 设计 ,显示 图 3-10 所 示 的 网 页 效果 。 

分 析 : 在 HTML 4 中 ,常用 的 页 面 布局 工具 有 表格 、 帧 和 div, 其 中 , 帧 标记 (frame) 在 
HTML 5 中 已 经 被 废弃 ,使 用 div 进行 页 面 布局 是 最 常用 的 手段 。 使 用 div 进行 页 面 布 局 ， 
常常 把 网 页 大 致 分 为 头 部 .内 容 、 底 部 几 个 区 块 。 然 后 定义 各 部 分 的 CSS 样式 表 , 通 过 id 或 
class 属性 将 样式 作用 于 每 一 个 div, 完 成 页 面 的 布局 。 
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口 ea3-l0divs 导 htm 


CD fileVWFV 教 材 一 Web 技 术 导论 (第 4 版 )2016/exa3-10div 布 局 .htm 











图 3-10 使 用 div 进行 页 面 布局 


要 得 到 图 3-10 所 示 的 网 页 ,我 们 将 网 页 分 成 header,menuleft,content 和 footer 四 个 区 
域 ,使 用 div 布局 ,示例 代码 如 下 : 

<html > 

<head> 

<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 

<style type = text/css> 

body{ margin:0px} 
div# maincontiner{ 

width:100%; 
height:100%; 
} 

div# header{ 
width:100%; 
height:130px; 
background - color: red; 
} 

div#menu— left{ 
width:25 %; 
height:calc(100% 一 200px); 
background - color:blue; 
float: left; 
} 

div# content{ 
width:75%; 
height:calc(100% — 200px); 
background — color:gray; 
float: left; 
} 

div# footer{ 


width:100%; 
height:70px; 
background — color: green; 
clear: both; 
} 
</style> 
</head> 
<body> 
<div id= "maincontiner"> 
<div id= "header"> 页 面 头 部 </div> 
<div id= "menu- left"> 左 侧 菜单 </div> 
<div id= "content"> 页 面 内 容 </div> 
<div id= "footer"> 页 面 底 部 </div> 
</div> 
</body > 
</html > 


在 上 面 的 div 定义 中 ,我 们 通过 设置 div 背景 色 ,以 便于 我 们 能 清楚 地 看 到 每 一 个 不 同 
的 div, 同 时 设置 folat 属性 ,使 得 左 侧 的 菜单 div 和 右 侧 的 内 容 div 能 够 从 左 向 右 排列 。 关 
于 左 侧 菜 单 和 右 侧 页 面 内 容 的 高 度 ,使 用 了 函数 calc(100%-200px), 即 客户 区 的 高 度 减 掉 
了 页 面 头 部 和 页 脚 的 高 度 。 

使 用 div 布局 ,只 是 物理 上 的 一 种 区 块 划分 ,对 每 一 个 div 的 内 容 并 没有 语义 上 的 表达 。 
内 容 语义 的 表达 是 设计 人 员 在 页 面 设计 中 完成 的 ,这 种 隐 式 的 语义 计算 机 程序 将 无 法 获得 ， 
这 也 是 HTML 4 规范 存在 的 最 大 缺陷 ,当然 这 种 缺陷 是 由 HTML 本 身 的 定位 决定 的 。 


3.6 HTML 5 技术 的 发 展 


在 2000 年 前 后 ,HTML 4 的 表现 已 相当 完美 ,人 们 开发 新 版 本 的 需求 并 不 迫切 。 因 
此 ,在 HTML 4.01 于 1999 年 12 月 发 布 后 ,后 继 的 HTML 5 和 其 他 标准 被 束 之 高 阅 。 可 
是 ,在 随后 的 日 子 里 ,智能 手机 等 智能 设备 快速 发 展 , 基 于 手机 的 移动 互联 网 应 用 迅猛 增长 。 
计算 机 应 用 也 出 现 了 从 传统 程序 向 Web 应 用 发 展 的 趋势 ,此 时 ,HTML 4 暴露 出 了 很 大 的 
局 限 性 。 人 们 需要 更 新 的 HTML 技术 ,以 拓展 它 更 广泛 的 适应 性 。 

为 了 推动 Web 标准 化 的 发 展 , 一 些 公司 联合 起 来 ,成立 了 一 个 Web 超 文 本 应 用 技术 工 
作 组 (Web Hypertext Application Technology Working Group WHATWG ) 的 组 织 。 
WHATWG 致力 于 Web 表单 和 应 用 程序 .而 万 维 网 联盟 (World Wide Web Consortium ， 
W3C) 专 注 于 XHTML 2.0。 在 2006 年 ,双方 决定 进行 合作 ,来 创建 一 个 新 版 本 的 HTML， 
即 HTML 5。2014 年 10 月 29 日 ,经 过 接近 8 年 的 艰苦 努力 ,W3C 发 布 了 HTML 5 规范 。 


3.6.1 HTML S 技术 将 性 


这 些 年 来 ,计算 机 应 用 和 互联 网 已 经 密 不 可 分 。 一 方面 ,基于 B/S 架构 的 Web 应 用 
系统 ( 即 网 络 平台 ) 已 经 超越 传统 的 单机 应 用 和 C/S 网 络 应 用 ,成 为 计算 机 应 用 系统 的 主 
流 模式 ; 另 一 方面 , 随 着 智能 手机 的 快速 发 展 和 普及 ,手机 APP 发 展 迅 猛 。 这 种 基于 互 
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联网 的 C/S 应 用 设计 精致 ,功能 独立 、 应 用 简单 ,受到 用 户 的 普遍 欢迎 。 但 是 ,他 却 违背 
了 我 们 所 追求 的 软件 平台 无 关 性 ,因为 移动 APP 是 在 操作 系统 上 运行 的 ,不 可 移植 是 其 
固有 特性 。 

浏览 器 /服务 器 (B/S) 模 式 为 我 们 勾画 出 了 互联 网 时 代 计 算 机 应 用 的 美好 模式 ,但 APP 
却 不 可 避免 地 在 这 条 路 上 设置 了 一 个 门槛 。 能 否 在 保证 APP 精致 ,应 用 简单 的 前 提 下 , 继 
续 使 用 B/S 架构 呢 ?” 显 然 HTML 4 已 经 无 能 为 力 。 简 单 的 版 本 升级 ,已 经 不 能 满足 我 们 的 
需要 ,在 保证 B/S 结构 的 前 提 下 ,对 HTML 进行 全 面 优化 升级 ,从 而 构造 一 个 全 新 的 、 功 能 
强大 的 前 端 开 发 与 应 用 框架 , 既 能 保证 APP 功能 的 实现 ,同时 又 是 基于 Web 的 。 这 就 是 
HTML 5 研发 的 初始 目标 ,这 些 目标 使 HTML 5 表现 出 了 许多 新 的 特性 。 

HTML 5 的 新 特性 ,主要 表现 在 以 下 几 个 方面 : 

(1) 淘汰 过 时 的 或 元 余 的 标记 及 标记 属性 。 例 如 : 纯粹 显示 效果 的 标记 ,如 < font > 和 
<center >, 它 们 已 经 被 CSS 取代 。 

(2) 自 适应 网 页 设计 ,同一 张 网 页 可 自动 适应 不 同 大 小 的 屏幕 ,根据 屏幕 宽度 ,自动 调 
整 布局 (layout) ,实现 “一 次 设计 ,普遍 适用 ”。 彻 底 解决 传统 网 站 为 不 同 的 设备 提供 不 同 的 
网 页 设计 ,如 专门 提供 一 个 mobile 版 本 ,或 者 Phone/iPad 版 本 。 

(3) 增强 了 文档 结构 化 和 语义 表达 ,结构 良好 和 表达 语义 是 实现 页 面 智能 处 理 的 基础 ， 
它 可 以 让 浏览 器 或 搜索 引擎 更 容易 地 ,准确 地 理解 页 面 内 容 。 

(4) 在 文档 编程 接口 方面 ,除了 原 有 的 DOM 接口 ,HTML 5 增加 了 丰富 的 API, 如 用 
于 即时 2D 绘图 的 画布 (Canvas) 标 签 , 定 时 媒体 回放 ,离线 数据 库存 储 ,文档 编辑 , 拖 搜 控制 
以 及 浏览 历史 管理 等 ,这 些 都 极 大 地 增强 了 HTML 的 编程 功能 。 

(5) 提供 了 强大 的 新 增 框架 ,如 手机 端 设备 与 页 面 交 互 , 重 力 感 应 、 地 理 定位 、 离 线 操作 
等 ,在 主流 移动 端 平台 ,可 以 很 轻松 地 自 定义 性 能 强大 的 WebAPP, 包 括 游戏 ,动画 和 企业 
级 的 应 用 开发 。 

基于 上 述 特 性 ,HTML 5 表现 出 了 强大 的 技术 优势 ,对 移动 APP、 网 络 游戏 ,Flash 动画 
等 已 有 的 技术 产生 了 巨大 的 挑战 。 开 发 基于 HTML 5 的 WebAPP 将 成 为 一 种 发 展 趋势 ， 
在 网 页 中 ,HTML 5 标签 也 将 最 终 替 代 传 统 的 Flash 动画 ,就 如 20 年 前 ,网 页 客户 端的 
Applet 被 Flash 动画 所 替代 一 样 。 


3.6.2 HTML S 新 标记 


在 HTML 5 规范 中 ,一 些 HTML 4 中 过 时 的 或 元 余 的 标记 及 标记 属性 被 淘汰 ,这 些 标 
记 包 括 < acronym >、< applet >.<basefont >< big >、.< center > < dir >、< font >、< strike >、 
< frameset >、< frame >、< noframes > 等 ,它们 的 功能 被 CSS 技术 或 其 他 标记 所 替代 。 

同时 , 随 着 互联 网 应 用 的 日 益 广泛 ,特别 是 移动 应 用 在 互联 网 应 用 中 的 比例 越 来 越 高 ， 
对 标记 语言 的 自 适 应 编程 功能 都 提出 了 更 高 的 要 求 。 因 此 .在 HTML 5 中 ,添加 了 很 多 新 
元 素 及 功能 以 满足 这 些 新 的 需求 ,比如 : 更 好 的 页 面 结构 ,图 形 绘制 ,多 媒体 内 容 展 示 , 表 单 
输入 对 象 以 及 拖 放 元 素 等 。 

1. HTML 5 部 分 新 增 标记 

在 HTML 5 中 ,增加 了 许多 新 的 元 素 及 属性 ,有 些 元 素 不 是 所 有 的 浏览 器 都 支持 的 ,所 
有 浏览 器 都 支持 的 部 分 常用 HTML 5 新 增 标记 及 功能 说 明 见 表 3-22。 


表 3-22 HTML 5 部 分 新 增 标 记 列 表 






























































标 记 功 能 

文档 语义 和 结构 标记 
定义 一 个 独立 的 语义 结构 ,可 以 表示 一 个 独立 的 内 容 项 目 ,例如 : 论坛 帖子 .博客 .用 

< article> 户 提交 的 评论 等 。 在 一 个 artilele 元 素 中 ,除了 内 容 主题 以 外 ,通常 会 有 自己 的 标题 
(header) 及 脚注 (footer) 

ee ee article 元 素 的 头 部 区 域 。 在 头 部 区 域 通常 包含 标题 ,logo 图 片 . 导 

定义 document 或 section 的 页 脚 ,通常 情况 下 ,该 元 素 会 包含 创作 者 的 姓名 文档 创 
作 日 期 以 及 联系 信息 等 

< address> 定义 文档 作者 或 拥有 者 的 联系 信息 ,经 常用 于 header ,footer 或 article 元 素 内 部 

i 定义 页 面 内 容 之 外 的 内 容 , 为 页 面 的 一 部 分 。< aside > 元 素 通 常 显示 成 侧 边 栏 
(sidebar) ,通常 用 于 显示 上 日 录 、 索 引 、\ 术 语 表 等 

<figure> 设置 独立 的 流 内 容 (图 像 图表、 照片, 代码 等 ), 内 部 包含 img 元 素 

< figcaption > 定义 < figure > 元素 的 标题 

< nav> 定义 导航 链接 的 部 分 ,内 容 包含 多 个 < a > 元素 

ee 定义 日 期 或 时 间 ,使 得 程序 可 读 取 日 期 和 时 间 , 而 不 是 个 普通 的 字符 串 ,搜索 引擎 也 
能 够 生成 更 智能 的 搜索 结果 

< progress > 定义 任何 类 型 的 任务 的 进度 ,例如 下 载 进 度 

cad 定义 文档 中 的 节 (section) , 它 是 内 容 在 语义 上 的 分 节 。article 元 素 还 可 与 section 元 
素 结合 ,需要 的 时 候 , 可 以 使 用 section 元 素 将 文章 分 为 几 个 段落 

多 媒体 标记 

ee 定义 音频 内 容 , 比 如 : 声音 、 音 乐 或 其 他 音频 流 。 属 性 包括 : src( 设 置 音 频 URL)， 
autoplay( 音 频 在 就 绪 后 马上 播放 ) ,controls( 显 示 播 放 控件 ) ,loop( 重 复 播放 ) 

本 定义 视频 (video 或 者 movie) ,属性 包括 : height( 播 放 器 窗口 高 度 ), width( 窗 口 宽 
度 ), 其 他 属性 同 autio 元 素 
为 媒介 元 素 ( 比 如 < video > 和 < audio >) 定 义 媒介 资源 。 属 性 包括 : media( 定 义 媒介 资 

< source> 源 的 类 型 , 供 浏览 器 决定 是 否 下 载 ) ,src( 媒 介 的 URL) ,type( 定 义 播放 器 在 音频 流 中 
开始 播放 的 位 置 ) 

a 定义 嵌入 的 内 容 ,比如 插件 。 属 性 包括 : src( 嵌 入 内 容 的 URL) ,type( 嵌 入 内 容 的 类 
型 ),height( 设 置 嵌 入 内 容 的 高 度 ) ,width( 设 置 嵌入 内 容 的 宽度 ) 

i 为 诸如 < video> 和 < audio > 元 素 之 类 的 媒介 规定 外 部 文本 轨道 。 用 于 规定 字幕 文件 
或 其 他 包含 文本 的 文件 , 当 媒 介 播 放 时 ,这 些 文件 是 可 见 的 

图 形 画 布 标记 

二 画布 标记 ,定义 图 形容 器 ,图 形 绘制 由 脚本 程序 完成 。canvas 拥有 多 种 绘制 路 径 、 矩 
形 . 圆 形 .字符 以 及 添加 图 像 的 方法 





可 以 看 出 ,在 HTML 5 的 新 增 标记 中 ,许多 标记 并 不 是 为 了 泻 染 显示 效果 ,而 是 使 文档 
结构 更 加 语义 化 。 例 如 ,在 页 面 中 插入 多 媒体 ,细致 的 标记 也 能 表达 内 容 语义 ,要 播放 一 段 
带 有 字幕 的 视频 ,示例 代码 如 下 : 

<video width= "320" height = "240" controls = "controls"> 

< source src= "forrest_gump. mp4" type= "video/mp4" /> 


< source src = "forrest_gump. ogg" type = "video/o0gg" /> 
<track kind = "subtitles" src= "subs chi. srt" srclang = "zh" label = "Chinese"> 
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<track kind = "subtitles" src= "subs eng. srt”srclang = "en” label = "English"> 
</video> 


在 HTML 5 中 ,画布 (canvas) 元 素 将 给 浏览 器 带 来 直接 在 上 面 绘制 矢量 图 的 能 力 , 下 
面 代码 将 在 浏览 器 窗口 绘制 一 个 红色 的 矩形 。 
<canvas id= "myCanvas"></canvas > 
< script type = "text/javascript"> 
var canvasobj = document. getElementById( 'myCanvas'); 
var ctx = canvasobj. getContext('2d') ; 
ctx. fillStyle = '#FF0000'; 
ctx. fillRect(0,0,170,100); 
</script > 


HTML 5 直接 在 浏览 器 中 显示 图 形 或 动画 的 功能 ,意味 着 用 户 可 以 脱离 Flash 和 
Silverlight, 也 就 是 说 在 HTML 5 网 页 中 ,传统 的 Flash 动画 将 被 HTML 5 标记 所 代替 ,就 
如 当时 Flash 的 出 现代 替 了 JavaApplet 一 样 。 

针对 HTML 5 增强 的 图 标 绘制 功能 ,一 些 针 对 HTML 5 jQuery 和 JavaScript 开发 者 
设计 的 图 表 库 可 供 开 发 人 员 免 费 使 用 。 例如; .NET 图 表 控 件 Chart FX, 它 充分 利用 了 
HTML 5,CSS 和 SVG ,在 无 插件 纯 JavaScript 的 浏览 器 上 运行 ,支持 JSON ,实现 任何 数据 
源 中 的 数据 都 可 以 展现 到 图 表 中 ,支持 超过 40 种 的 2D、3D 图 表 类 型 ,从 而 在 浏览 器 中 提供 
美观 优越 的 图 表 和 更 丰富 的 最 终 用 户 体验 。 

2. 表单 输入 类 型 

在 HTML 中 ,表单 (form) 是 用 户 和 程序 的 主要 交互 界面 ,系统 功能 主要 是 通过 表单 完 
成 的 。 因 此 ,为 了 增强 客户 端的 编程 能 力 , 在 HTML 5 中 ,对 表单 输入 类 型 进行 了 大 量 的 扩 
充 。 同 时 ,为 了 简化 用 户 输入 数据 有 效 性 的 验证 ,还 扩充 了 相应 的 属性 ,从 而 使 前 端 客户 端 
脚本 编程 变 得 更 加 简单 高 效 。 

HTML 5 表单 输入 元 素 (input) 部 分 新 增 属性 及 功能 见 表 3-23。 

表 3-23 ”输入 (input) 元 素 部 分 新 增 属性 及 功能 


属 性 名 属性 值 及 功能 

设置 输入 域 类 型 。 

已 有 输入 类 型 包括 : text( 文 本 杠 )、password( 密 码 框 )、radio( 单 选 按 钮 )、button( 按 
钮 )、checkbox( 复 选 框 )\file( 文 件 )、hidden (隐藏 ) reset( 重 置 按钮 )、submit (提交 
type 按钮 ) 。 

新 增 输入 类 型 : date( 日 期 ) .time( 时 间 )、datetime( 日 期 时 间 )、datetime-local( 本 地 )、 
month( 月 份 )、week( 周 )、number( 数 字 ) .range() ,image( 图 片 )、email( 邮 件 地 址 ) 、url 




















(网 址 》 
autofocus 规定 输入 字段 在 页 面 加 载 时 是 否 获得 焦点 (不 适用 于 type 一 "hidden ”) 
placeholder 设置 帮助 用 户 填写 输入 字段 的 提示 
required 指示 输入 字段 的 值 是 必需 的 
step 规定 输入 字 的 合法 数字 间隔 
min, max 规定 输入 字段 的 最 小 值 和 最 大 值 ,创建 合法 值 的 范围 





设置 正则 表达 式 ,规定 输入 字段 的 值 的 模式 或 格式 。 例 如 ,pattern 一 "[0-9]" 表 示 输 
入 值 是 0 与 9 之 间 的 数字 


pattern 








续 表 























属 性 名 属性 值 及 功能 
form 规定 输入 字段 所 属 的 一 个 或 多 个 表单 
formaction 覆盖 表单 的 action 属性 服务 器 程序 URL( 适 用 于 type 二 "submit" 和 type 二 "image") 
formenctype 覆盖 表单 的 enctype 属性 (适用 于 type 二 "submit" 和 type 一 "image") 
formmethod 覆盖 表单 的 method 属性 (适用 于 type= "submit" 和 type 一 "image") 
formtarget 覆盖 表单 的 target 属性 (适用 于 type 二 "submit" 和 type 二 "image") 
formnovalidate ”| 覆盖 表单 的 novalidate 属性 。 如 果 使 用 该 属性 , 则 提交 表单 时 不 进行 验证 


在 HTML 5 中 ,对 表单 输入 进行 了 重要 优化 和 提升 ,增加 了 许多 全 新 的 输入 类 型 ,包括 
日 期 .Email、URL 等 ,在 输入 数据 有 效 性 验证 方面 ,增加 了 range、min、max 以 及 pattern 属 
性 ,减少 了 数据 有 效 性 验证 的 编程 。 此 外 ,还 增加 了 输入 元 素 form 属性 ,使 得 一 个 输入 域 ， 
可 以 在 多 个 表单 中 共享 ,增强 了 一 个 页 面 多 个 表单 设计 中 的 编程 灵活 性 。 


3.6.3 自 适应 网 页 设计 


现在 , 随 着 移动 互联 网 的 发 展 , 网 络 接 人 设备 日 趋 多 样 性 ,人 们 不 仅 可 以 通过 台式 电脑 
上 网 ,还 可 以 通过 笔记 本 ,平板 电脑 .智能 手机 等 设备 访问 互联 网 。 不 同 的 设备 ,其 显示 屏幕 
的 大 小 很 悬殊 ,即使 是 同一 显示 屏 , 分 辩 率 的 设置 也 有 很 大 不 同 , 这 就 导致 了 网 页 在 不 同 的 
显示 器 或 同一 显示 器 不 同 的 显示 分 辩 率 下 如 何 自 适 应 显示 的 问题 。 

针对 不 同 的 显示 器 和 显示 分 辩 率 设置 不 同 的 网 页 ,其 工作 量 大 ,难以 维护 。 随 着 
HTML 5 的 出 现 , 自 适应 网 页 设计 成 为 可 能 。 所 谓 自 适应 网 页 设计 ,就 是 指 通过 在 网 页 中 
使 用 CSS 和 JavaScript 代码 ,使 得 网 页 可 以 自动 识别 不 同 的 显示 屏幕 大 小 及 分 辩 率 设置 的 
变化 ,然后 对 网 页 的 显示 能 够 自动 做 出 相应 的 调整 ,以 保证 页 面 显 示 效 果 的 美观 ,避免 出 现 
水 平 深 动 条 。 

1. 设置 浏览 器 窗口 宽度 

在 有 些 情况 下 ,为 了 适应 屏幕, 不 少 移动 浏览 器 都 会 把 HTML 页 面 置 于 较 大 窗口 宽度 
(一 般 会 大 于 屏幕 宽度 ) ,可 以 使 用 viewport meta 标签 来 设 定 ,代码 如 下 : 


<meta name = "viewport" content = "width= device - width，initial- scale=1.0"> 


上 述 meta 标记 告诉 浏览 器 窗口 宽度 等 于 设备 屏幕 宽度 , 且 不 进行 初始 缩放 。 

2. 判断 媒体 类 型 

在 CSS3 中 ,提供 了 Media 查询 功能 ,可 以 查询 用 户 端的 媒体 类 型 及 显示 分 辩 率 大 小 ， 
以 便 使 得 网 页 在 显示 时 适应 媒体 的 变化 。 媒 体 查询 有 两 种 常用 方法 : 

(1) 在 文档 头 部 的 link 元 素 中 ,设置 媒体 查询 条 件 , 并 设置 符合 条 件 时 要 调用 的 CSS 
样式 表 。 一 般 形式 如 下 : 

<link rel = "stylesheet" media= "mediatype and|not|only (media feature)" 

href = "stylesheet. css"> 
参数 说 明 如 下 : 
。 mediatype, 媒 体 类 型 ,常用 取 值 有 : screen( 电 脑 屏幕 .平板 电脑 、 智 能 手机 等 ) ,print 
(打印 机 和 打印 预览 ) ,all( 所 有 设备 ) 等 。 
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。 media feature, 媒 体 特 征 , 常 用 取 值 有 : max-width( 输 出 窗口 最 大 可 见 区 域 宽度 , 例 
如 浏览 器 窗口 ),max-device-width( 输 出 设备 最 大 可 见 区 域 宽度 ,例如 整个 显示 屏 宽 
度 )。 根 据 上 述 两 个 属性 的 含义 ,如 果 使 用 max-device-width 属性 , 当 浏 览 器 窗口 改 
变 大 小 、 手 机 横竖 发 生变 化 时 ,不 会 激活 相应 的 CSS 调用 ,因为 这 只 是 显示 区 域 的 
变化 ,设备 (device) 并 未 改变 。 相 应 的 属性 还 有 min-width、min-device-width、max- 
height .max-device-height 等 。 

在 实际 应 用 中 ,如 果 使 用 电脑 上 网 ,我 们 可 能 会 放大 或 缩小 浏览 器 窗口 的 大 小 ,但 对 于 
智能 手机 ,因为 屏幕 本 身 就 不 大 ,因此 , 较 少 去 缩小 浏览 器 窗口 的 大 小 。 因 此 ,面向 “移动 设 
备 ” 用 户 常 常 使 用 max-device-width, 面 向 *PC 设备 ”用 户 常 使 用 max-width。 

例如 : 


<link rel = "stylesheet" media = "screen and (max — width: 1024px)" href = "small.css" /> 


上 面 media 语句 的 含义 是 : 当 显 示 器 浏览 器 窗口 宽度 小 于 或 等 于 1024px 时 ,调用 样式 
表 small. css。 

(2) 在 < style > 标记 内 定义 ,定义 媒体 查询 条 件 及 对 应 的 CSS 样式 。 一 般 形式 如 下 : 

@media "mediatype and|not|only (media feature)" { 

样式 表 定 义 

} 

上 述 语句 的 含义 是 : 当 满 足 相 应 的 媒体 特征 时 ,应 用 相应 的 CSS 样式 表 。 

3. 页 面 布局 与 元 素 浮动 设置 

当 我 们 设置 页 面 布局 时 ,必须 要 考虑 不 同 的 显示 设备 以 及 显示 分 辨 率 的 大 小 。 现 在 计 
算 机 ,手机 等 设备 的 显示 屏 的 大 小 很 悬殊 ,同一 个 显示 器 ,显示 分 辩 率 的 设置 也 不 相同 。 对 
于 同一 个 网 页 ,在 不 同 的 显示 器 条 件 下 ,如 果 和 希望 不 出 现 水 平 滚动 条 ,要 么 对 网 页 整体 进行 
缩小 ,要 么 改变 页 面 布 局 。 例 如 : 将 一 个 三 列 布局 的 网 页 , 变 成 两 列 或 一 列 。 

如 果 要 使 网 页 的 布局 随 着 设备 和 浏览 器 窗口 的 大 小 而 改变 ,除了 在 网 页 中 使 用 Media 
查询 条 件 外 ,网 页 中 元 素 的 宽度 不 能 使 用 绝对 值 ,应 使 用 百分比 或 auto, 同 时 还 需要 设置 为 
可 浮动 的 。 

【 例 3-12】 设计 一 个 两 列 div 的 自 适应 页 面 , 分 为 4 种 情况 : 浏览 器 窗口 宽度 大 于 
1000px, 左 侧 div 占 300px 固定 宽度 ,剩余 宽度 给 右 侧 div; 加 当 窗 口 宽度 小 于 等 于 1000px， 
且 大 于 800px 时 ,显示 两 列 , 左 侧 宽度 占 30% ,剩余 宽度 给 右 侧 div; @ 当 窗口 宽度 小 于 等 于 
800px 时 ,显示 为 1 列 ,div 宽度 设 为 auto, 不 浮动 ; @ 当 窗口 宽度 小 于 等 于 480px 时 ,一 般 
为 手机 显示 屏 , 显 示 为 1 列 , 并 隐藏 sidebar。 

根据 题目 要 求 , 编 写 自 适应 网 页 代码 如 下 : 

<! doctype html > 

<html> 

<!doctype html > 

<html> 

<head> 


<meta charset = "utf — 8"> 


<meta name = "viewport" content = "width= device— width, initial - scale=1.0"> 


< style type= "text/css"> 

/* 显示 宽度 大 于 1000px 时 x*/ 
#container{width:auto;} 

#header {height:160px;} 

#sidebar {width:300px;float:1left;} 
#content {width:calc(100 % — 300px — 4px);} 
#footer {clear:both;} 

/x* 显示 宽度 小 于 等 于 1000px 时 x*/ 
@media screen and (max — width:1000px) { 
#container{width:100% ;} 

# sidebar {width:30% ;float:left;} 
#content {width:calc(70% — 4px);} 

} 

/x* 显示 宽度 小 于 等 于 800px 时 x*/ 
@media screen and (max — width:800px) { 
# sidebar {width:auto;float :none;} 
#content {width:auto;float :none;} 

} 

/* 显示 宽度 小 于 等 于 480px 时 */ 
@media screen and (max - width:480px) { 
#header {height:auto;} 

#sidebar {display:none;} 

} 

#content {background: #f8f8f8;} 

# sidebar {background: #f0efef;} 


#container, # header, # sidebar, # content, # footer{border:solid lpx #ccc;} 


</style> 

</head> 

<body> 

<div id= "container"> 
<div id= "header"> 
<hl > Header </hl > 
</div> 
<div id= "sidebar"> 
<h2 > Sidebar </h2 > 
<p>menul </p> 
<p> menu2 </p> 

</div> 

<div id= "content"> 
<p>Content </p> 
</div> 
<div id= "footer"> 
<p> Footer </p> 
</div> 

</div> 

</body> 

</html > 
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在 浏览 器 中 打开 上 面 的 网 页 ,对 浏览 器 窗口 进行 放大 缩小 操作 ,可 看 到 页 面 布局 的 变 
化 。 上 述 代码 虽然 只 有 三 个 media 查询 ,开始 的 CSS 样式 代表 了 窗口 宽度 大 于 1000px 的 
情况 。 后 面 的 三 个 media 查询 ,分 别 用 于 处 理 当 窗口 宽度 发 生变 化 时 ,对 每 个 div 的 CSS 设 
置 , 包 括 宽度 和 浮动 属性 ,其 目的 是 不 显示 水 平 滚动 条 。 

在 默认 情况 下 ,div 为 块 元 素 ,输出 前 后 会 发 生 换行 ,如 果 设 置 了 float 属性 , 则 该 div 元 
素 的 输出 先后 不 发 生 换行 ,后 面 的 div 会 接着 输出 ,如 果 宽 度 大 于 当前 行 的 剩余 宽度 , 则 自 
动 输出 到 下 一 行 。 如 果 宽 度 大 于 浏览 器 窗口 宽度 , 则 显示 水 平 滚动 条 。 为 避免 出 现 水 平 滚 
动 条 ,设置 宽度 为 auto 即 可 。 

在 content 的 CSS 设置 中 ,width:calc(70%-4px) 含 义 是 左 侧 占 了 30% 宽 度 , 剩 余 宽 度 
给 右 侧 ,因为 两 个 div, 左 右 共 4 条 边框 , 占 4 个 像素 ,应 从 宽度 中 减 去 。 

4. 图 片 大 小 自 适应 

在 网 页 布局 自 适应 时 ,如 果 存 在 图 片 , 当 图 片 宽度 大 于 浏览 器 窗口 宽度 时 ,将 出 现 水 平 
滚动 条 ,要 保证 不 出 现 滚动 条 ,就 需要 对 图 片 进行 缩小 。 要 对 图 片 放 大 缩小 ,可 以 通过 img 
元 素 的 width 和 height 属性 完成 。 在 浏览 器 窗口 放大 缩小 的 过 程 中 ,不 可 能 设置 width 和 
height 的 绝对 值 ,因此 ,只 能 设置 相对 比例 或 auto。 对 图 片 进行 放大 缩小 的 方式 很 多 ,要 控 
制图 片 按 比例 缩放 ,可 通过 CSS 实现 ,例如 : 


. img {max - width:300px;height:auto;} 


上 面 CSS 代码 可 以 把 图 片 按照 比例 缩放 ,宽度 不 得 超过 300 像素 ,超过 的 话 就 缩小 到 
300px, 高 度 按照 比例 缩放 。 

通过 JavaScript 也 可 以 实现 对 图 片 大 小 的 控制 ,例如 : 当 放大 或 缩小 浏览 器 窗口 时 , 调 
用 函数 修改 image 对 象 的 尺寸 。 示 例 代 码 如 下 : 


<! DOCTYPE htm]"> 
<html> 
<head> 
<style type= "text/css"> 
#boxdiv img{width:100 % ;height:100% ;} 
</style> 
< script type = "text/javascript"> 
function findDimensions( ) 
‘ 
// 获 取 浏览 器 窗口 宽度 ,高 度 代码 类 似 
if (window. innerWidth) { 
winWidth = window. innerWidth; 
} 
else if ((document. body) && (document. body. clientWidth)) { 
winWidth = document. body. clientWidth; 
} 
/+ 设置 image 对 象 尺寸 
imgobj = document. getElementById("snmile"); 


imgobj. width= winWidth + "px"; 
x*/ 


// 间 接 缩放 图 片 , 设置 div 的 宽度 值 ,高 度 auto, 图 片 尺寸 随 div 变化 
if (document. getElementById( "boxdiv")) { 
document. getElementById( "boxdiv"). style. width = winWidth + "px"; 
//document. getElementById("boxdiv"). style.height = winHeight + "px"; 
| 
} 
</script > 
</head> 
<body style= "margin:0px;padding: 0px;" onresize = "findDimensions();"> 
<div id= "boxdiv"> 
< img id= "smile" src= "smile.gif"> 
</div> 
</body> 
</html > 


需要 注意 的 是 ,网 页 文件 本 身 和 图 片 文件 的 加 载 是 异步 的 ,只 有 图 片 文件 加 载 完成 后 才 
可 以 获取 图 片 的 原始 尺寸 。 因 此 ,在 image 加 载 尚未 完成 时 ,可 能 得 不 到 image 对 象 的 值 。 
可 以 将 image 包含 在 一 个 div 中 ,通过 修改 div 的 宽度 ,来 间接 地 修改 image 对 象 的 宽度 。 


3.7 扩展 标记 语言 XML 


在 互联 网 浩 若 烟 海 的 数据 中 ,HTML 技术 解决 了 数据 的 显示 问题 ,让 人 们 在 浏览 网 页 
时 有 更 好 的 体验 。 但 是 ,对 互联 网 数据 的 挖掘 利用 却 遇 到 了 重要 的 难题 ,因为 HTML 数据 
是 没有 语义 的 。 例 如 ,我 们 使 用 搜索 引擎 搜索 信息 ,主要 还 是 靠 关键 词 搜索 ,这 种 依赖 字符 
串 匹 配 进行 的 搜索 导致 的 结果 就 是 查 全 率 高 而 查 准 率 很 低 ,搜索 得 到 的 信息 是 不 准确 的 。 

为 了 解决 文档 的 语义 问题 ,一 种 新 的 标记 语言 的 概念 出 现 了 ,这 就 是 可 扩展 标记 语言 
(eXtensible Markup Language,XML)。 虽 然 都 是 标记 语言 ,但 XML 和 HTML 的 定位 完 
全 不 同 ,HTML 标记 的 是 内 容 的 展示 形式 ,XML 则 是 对 内 容 做 的 语义 标记 ,其 目的 是 数据 
的 组 织 和 使 用 ,是 为 计算 机 应 用 系统 之 间 进 行 跨 平台 数据 交换 的 重要 手段 。 


3.7.1 XML 技术 简介 


XML 和 HTML 都 称 为 标记 语言 ,但 是 两 者 有 着 本 质 的 不 同 。HTML 是 一 种 数据 展 
示 技 术 , 它 对 内 容 加 以 标记 ,使 得 内 容 以 特定 的 方式 在 Web 浏览 器 中 显示 。 但 是 ,XML 的 
基本 动机 则 是 对 数据 结构 的 表达 ,实现 内 容 和 内 容 展示 的 分 离 , 其 追求 的 目标 是 XML 文档 
的 结构 良好 以 及 内 容 的 有 效 性 约束 。 而 XML 文档 内 容 的 显示 , 则 需要 其 他 相应 的 XML 规 
范 , 例 如 XML 扩展 样式 语言 XSL 等 。 

1. HTML 的 局 限 

HTML 的 出 现 无 疑 是 Internet 技术 和 Web 技术 的 一 次 突破 ,为 推动 Internet 和 Web 
技术 的 发 展 发 挥 了 巨大 的 作用 ,被 称 为 互联 网 发 展 历史 上 的 第 一 个 里 程 碑 。 随 着 Web 技术 
的 快速 发 展 , Internet 上 的 Web 信息 越 来 越 多 ,内 容 越 来 越 复杂 ,数据 格式 也 越 来 越 多 , 特 
别 是 近年 来 移动 终端 设备 的 多 样 化 ,HTML 的 适用 性 遇 到 了 很 大 的 挑战 。 

这 些 挑 战 包括 : 
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(1) 不 能 适应 现在 越 来 越 多 的 网 络 设备 和 应 用 的 需要 ,比如 手机 、PDA.、 信 息 家 电 都 不 
能 直接 显示 HTML。 

(2) HTML 代码 不 规范 、 腔 肿 ,浏览 器 需要 足够 智能 和 庞大 才能 够 正确 显示 HTML。 

(3) HTML 文档 中 数据 与 表现 混杂 ,页面 要 改变 显示 ,就 必须 重新 制作 HTML。 

(4) HTML 的 标记 固定 ,HTML 只 是 一 种 表现 技术 ,不 能 表达 语义 。 

在 上 述 诸多 的 挑战 中 ,虽然 通过 HTML 版 本 的 升级 和 浏览 器 版 本 的 升级 来 解决 
HTML 文档 的 简单 和 规范 问题 。 但 是 ,在 语义 表达 上 ,HTML 表现 出 来 的 局 限 是 不 可 解决 
的 ,因为 ,这 是 由 HTML 本 身 的 定位 所 决定 的 ,否则 ,HTML 就 不 是 HTML 了 。 

2. XML 的 产生 和 发 展 

HTML 所 表现 出 来 的 局 限 性 推动 了 XML 的 产生 和 发 展 。1996 年 8 月 ,那些 关心 
SGML 的 专家 聚集 在 美国 西雅图 ,成 立 了 一 个 名 为 GCA (Graphic Communications 
Association, 图 形 通信 协会 ) 的 组 织 , 研 究 如 何 开发 SGML 以 便 使 它 适应 和 促进 Web 技术 
的 发 展 。 他 们 对 SGML 过 于 复杂 且 难 于 被 理解 和 实现 的 方面 进行 简化 ,去 掉 其 语法 定义 部 
分 ,适当 简化 DTD 部 分 ,并 增加 了 部 分 互联 网 的 特殊 成 分 。 为 了 体现 它 与 HTML 的 不 同 ， 
工作 组 将 其 命名 为 XML(eXtensible Markup Language) ,同时 也 将 自身 更 名 为 XML 工作 
组 。1998 年 2 月 10 日 ,XML 工作 组 正式 向 W3C 提交 了 XML 的 最 终 推荐 标准 ,这 就 是 
XML 1.0 标准 。 

在 XML 中 ,SGML 的 最 初 动机 得 以 延续 , 那 就 是 将 文件 内 容 和 处 理 这 些 内 容 的 应 用 程 
序 进行 分 离 , 在 文件 内 容 中 不 能 入 数据 的 处 理 过 程 代 码 , 文 件 内 容 被 编码 为 条 理 清 晰 的 文 
本 ,从 而 便于 数据 交换 和 处 理 。 对 数据 进行 研究 有 着 重要 的 意义 ,因为 ,数据 往往 是 相对 稳 
定 的 ,变化 的 通常 是 处 理 这 些 数 据 的 程序 。 实 现 数据 和 操作 这 些 数据 的 程序 的 分 离 是 XML 
的 设计 动机 ,这 是 深刻 理解 XML 的 基础 。 在 XML 中 ,如 果 XML 某 方 面 设 计 得 与 应 用 程 
序 太 过 紧密 ,就 可 以 认为 这 是 一 种 bug, 这 是 使 用 XML 最 重要 的 一 个 原则 。 

XML 标准 的 发 展 没有 HTML 那样 迅速 ,直到 2002 年 10 月 15 日 , W3C 才 发 布 了 
XML 1.1 候选 推荐 标准 。 在 XML 1. 0 规范 中 ,使 用 的 字符 集 为 Unicode 2. 0。 随 着 
Unicode 版 本 的 升级 ,XML 1. 1 支持 新 的 Unicode 字符 ,不 再 局 限于 一 个 具体 的 Unicode 版 
本 。 此 外 ,在 XML 1.1 中 ,增加 了 IBM 大 型 主机 规定 的 换行 符 (# x85: 十 六 进 制 的 85) 和 
Unicode 换行 符 (# x2028) 的 处 理 能 力 ,这 些 改变 都 提高 了 XML 的 国际 化 支持 水 平 。 

3. XML 解析 器 

对 XML 文档 的 理解 ,是 通过 XML 解析 器 完成 的 , 它 是 一 个 软件 模块 。XML 解析 器 有 
确认 型 和 非 确 认 型 两 种 。 确 认 型 XML 文档 解析 器 检查 XML 文档 的 语法 ,将 XML 文档 内 
容 同 文档 类 型 定义 DTD 和 Schema 作 比 较 。XML 分 析 器 通过 判断 XML 数据 是 否 和 预定 
义 的 确认 规则 相符 ,以 判定 XML 文档 是 否 为 构造 良好 。 非 确认 型 XML 解析 器 也 进行 
XML 文档 语法 的 检查 ,但 不 进行 XML 文档 内 容 和 DTD 及 Schema 的 比较 。 

现在 ,几乎 所 有 的 主流 浏览 器 都 实现 了 XML 解析 器 ,支持 XML 和 XSLT(eXtensible 
Stylesheet Language Transformation , 扩展 样式 表 转 换 语 言 ) 。 例 如 ,在 微软 的 Internet 
Explorer 浏览 器 中 ,内置 了 XML 确认 性 解析 器 MSXML。 如 果 是 一 个 有 效 的 XML 文件 ， 
在 浏览 器 中 打开 XML 文件 时 ,XML 文档 将 显示 为 一 个 树 状 结构 , 称 为 XML 文档 树 。 通 过 
单 击 元 素 左 侧 的 加 号 或 减 号 ,可 以 展开 或 折 释 元 素 结构 。 此 外 :浏览 器 或 其 他 应 用 程序 也 可 





以 使 用 CSS 或 XSLT 样式 转换 以 HTML 格式 显示 XML 文档 数据 。 

4. XML 技术 分 析 

随 着 Internet 的 快速 发 展 ,尤其 是 电子 商务 ,Web 服务 等 应 用 的 广泛 使 用 ,XML 类 型 
的 数据 成 为 当前 主流 的 数据 形式 。 虽然 ,XML 作为 一 种 通用 的 数据 交换 语言 ,已 经 成 为 业 
界 的 一 种 具有 垄断 性 的 标准 ,在 跨 平台 跨 系统 数据 交换 方面 拥有 无 可 比拟 的 优势 。 但 是 ,与 关 
系数 据 库 相 比 ,XML 的 最 大 缺陷 就 是 它 的 效率 较 低 。 因 为 在 关系 型 数 库 中 ,数据 的 字段 名 只 
需要 出 现 一 次 ,但 是 在 XML 数据 文件 中 .元素 名 将 反复 出 现 .这 必须 会 影响 到 查询 的 效率 。 

作为 一 种 数据 存储 方案 ,XML 技术 无 疑 具有 绝对 的 优势 。 提 高 数据 的 查询 、 使 用 效率 
成 为 XML 技术 研究 的 热点 ,这 些 研 究 包 括 XML 与 关系 数据 库 之 间 的 相互 转换 ,利用 关系 
数据 库 的 成 熟 技术 对 XML 数据 进行 处 理 。 为 提高 XML 的 查询 效率 ,需要 为 XML 类 型 提 
供 索 引 功能 。 如 果 对 XML 文档 不 构建 索引 结构 ,那么 针对 XML 数据 的 任何 查询 都 很 可 能 
导致 对 整个 文档 树 的 遍历 , 随 着 XML 数据 集 的 增 大 ,这 种 开销 是 不 可 忍受 的 。 

上 述 关于 XML 研究 和 应 用 的 需求 推动 了 XML 的 发 展 ,也 导致 了 许多 新 的 XML 相关 
标准 和 规范 的 产生 ,这 包括 XMLSchema、 扩 展 样式 表 转 换 语言 XSLT、XML 路 径 语言 
XPath、XML 查询 语言 XQuery、XML 链接 语言 规范 XLink 和 XPointer 等 。 这 些 规 范 都 以 
XML 语法 为 基础 ,遵守 XML 规范 ,因此 ,目前 XML 已 经 成 为 各 种 语言 规范 的 元 语言 。 


3.7.2 XML 文档 结构 


XML 文档 是 一 个 纯 文 本 文件 ,XML 规范 定义 了 XML 文档 良好 的 结构 ,将 一 个 XML 
文档 分 为 XML 文档 头 部 (文档 序言 ) 和 文档 体 (文档 内 容 ) 两 个 部 分 ,一 般 形 式 如 下 : 

<?xml version = "1.0" encoding = "gb2312"?> 

<?xml - stylesheet type = "text/xsl" href = "userxslfile.xsl"?> 

<!DOCTYPE rootElementName SYSTEM "userDTDfile. dtd"> 


<! DOCTYPE rootElementName[ 
<! ELEMENT elementname( element - defination)> 


< rootElementName > 
<elementname > ElementContent </elementname > 
< elementname > ElementContent </elementname > 


< ne > ElementContent </elementname > 

</rootElementName > 

1. XML 文档 头 部 

XML 文档 头 部 又 称 为 文档 序言 , 它 是 指 根 元 素 之 前 的 部 分 ,XML 文档 头 部 的 作用 是 
通知 XML 解析 器 按 相关 条 件 和 限制 对 XML 文档 进行 解析 。 在 XML 文档 中 ,文档 头 部 包 
括 XML 声明 .处理 指 令 ,文档 类 型 定义 和 注释 四 部 分 。 按 XML 规范 要 求 ,“ 声 明 ” 必 不 可 
少 , 并 且 作 为 文档 的 第 一 条 语句 出 现 ,其 他 部 分 根据 需要 确定 .可 以 省 略 。 

(1) XML 声明 

XML 声明 是 XML 文档 头 部 的 第 一 条 语句 ,也 是 整个 文档 的 第 一 条 语句 。XML 声明 
语句 的 格式 如 下 : 
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<?xml version = "versionNumber" [encoding = "encodingValue" ] [ standalone = "yes/no" ] ?> 


XML 声明 语句 ,以 “<? xml” 开 始 、 以 “? >” 结束, 表示 这 是 一 个 XML 文档 。Version 
属性 为 必 选 属性 ,表明 使 用 的 XML 规范 的 版 本 号 ,以 便 解 析 器 进行 正确 的 解析 。encoding 
属性 指定 本 XML 文档 使 用 的 字符 集 。XML 解析 器 至 少 能 够 识别 UTF-8 和 UTF-16 两 种 
字符 编码 ,也 可 以 设置 GB2312、BIG5 等 汉字 字符 编码 。standalone 属性 指定 本 XML 文档 
是 否 需要 外 部 的 DTD 文档 作为 本 文档 的 校 验 依 据 。 即 本 XML 文档 是 否 是 一 个 独立 文档 。 
默认 值 是 yes, 表 示 是 独立 文档 不 需要 外 部 DTD 关联 ,否则 应 该 赋值 为 no。 

(2) 处 理 指令 

处 理 指令 (Process Instruction, PD 是 在 XML 文档 中 由 应 用 程序 进行 处 理 的 部 分 ， 
XML 解析 器 把 信息 传送 给 应 用 程序 ,应 用 程序 解释 指令 ,按照 它 提供 的 信息 进行 处 理 。 处 
理 指 令 是 以 "<?” 开 始 、 以 “? >>” 结束, 其 格式 是 : 


<? 处 理 指令 名 称 处 理 指令 信息 ?> 


以 "xml-Lname] "开头 的 处 理 指令 指定 的 是 Lnamej 中 给 出 的 与 XML 相关 的 技术 。 处 
理 指令 以 “xml-stylesheet" 开 头 , 指 明 相关 的 技术 是 样式 表 , 这 条 指令 就 被 传送 给 由 type 指 
定 的 引擎 ,而 不 传 给 XML 解析 器 。 例 如 ,<? xml-stylesheet type 一 "text/css" href 一 "filel. 
css"? >, 该 语句 中 type 表示 关联 的 文档 类 型 ,现在 的 文档 是 文本 、 层 瑟 样 式 表 CSS 类 型 引 
擎 ,href 指定 关联 的 文档 所 在 位 置 和 文档 的 名 称 。 再 如 ,<? xml-stylesheet type 一 "text/ 
xsl" href 一 "filel. xsl"? >, 则 关联 的 样式 文件 为 XML 扩展 样式 表 xsl 文件 ,以 上 是 使 用 较 
频繁 的 两 条 指令 ,它们 规定 XML 文档 中 的 数据 使 用 哪 一 种 格式 在 浏览 器 上 显示 。 

(3) 文档 类 型 定义 

如 果 XML 文档 需要 使 用 DTD 对 内 容 进 行 有 效 性 验证 , 则 需要 在 文档 头 部 增加 外 部 文 
档 类 型 定义 声明 或 进行 内 部 文档 类 型 定义 。 外 部 文档 类 型 定义 声明 , 即 声 明 一 个 外 部 DTD 
文件 , 它 属于 处 理 指令 的 范畴 ,一 般 形式 是 : 


<! DOCTYPE rootElementName SYSTEM "dtdFile "> 


在 外 部 文档 类 型 定义 后 面 将 是 内 部 文档 类 型 定义 (DTD) 部 分 ,用 于 定义 XML 中 用 到 
的 元 素 .元素 属性 和 实体 , 即 声明 用 户 自 定义 标记 及 相关 属性 ,其 目的 是 用 于 确认 型 XML 
解析 器 检查 XML 文档 是 否 结构 良好 。 相 对 于 用 外 部 的 DTD 声明 ,这 里 的 文档 类 型 定义 称 
为 内 部 DTD 声明 ,其 一 般 形式 是 : 


<! DOCTYPE rootElementName [ 
<! ELEMENT element - name(element - defination)> 





]> 


其 中 , rootElementName 为 文档 的 根 元 素 , 在 根 元 素 内 定义 其 他 元 素 。 例 如 ， 
<!ELEMENT address(buildingnumber，street，city。state，zip) >, 则 定义 一 个 名 称 为 
address 的 元 素 ,address 元 素 按 顺序 又 包含 < buildingnumber >,< street >,< city >,< state >， 
<zip> 5 个 元 素 。 可 以 进一步 定义 < buildingnumber > 元 素 为 <IELEMENT buildingnumber 
(#PCDATA)>, 它 确定 了 < buildingnumber > 元 素 的 取 值 。 

在 一 个 XML 文档 中 ,内 部 文档 类 型 定义 (DTD) 部 分 不 是 必需 的 ,如 不 需要 可 以 省 略 。 


(4) 注释 
XML 中 使 用 注释 对 文档 进行 解释 说 明 ,增加 程序 的 可 读 性 ,处 理 程 序 不 对 注释 标记 的 
内 容 进行 处 理 。 与 HTML 一 样 ,注释 是 由 “<! 一 开始 ,由 "* 一 >” 结 束 ,注释 语句 的 格式 是 : 


<! -- 注释 文字 --> 


使 用 注释 时 需要 注意 ,第 一 ,注释 可 以 出 现在 文档 头 部 ,也 可 以 出 现在 主体 部 分 ,但 不 能 
出 现在 声明 之 前 ,声明 语句 必须 是 XML 文档 的 第 一 条 语句 。 第 二 ,注释 可 以 包含 标记 ,使 
标记 失去 作用 ,但 注释 不 能 出 现在 标记 中 。 

2. XML 文档 内 容 

XML 文档 内 容 , 即 XML 文档 体 , 它 是 XML 文档 的 数据 部 分 。 文 档 体 包括 一 个 或 多 个 
元 素 ,每 个 元 素 有 一 个 开始 标记 和 一 个 结束 标记 定义 。 文 档 体 中 的 元 素 定义 了 数据 的 结构 ， 
有 一 个 单独 的 根 元 素 包 含 所 有 其 他 元 素 ,文档 中 所 有 数据 都 包含 在 文档 体 的 根 元 素 中 。 

在 文档 体内 ,还 可 以 使 用 名 称 空间 , 即 在 每 一 个 元 素 和 属性 前 面 加 上 前 级 “名 称 空间 :” 
来 唯一 地 标识 一 个 元 素 或 一 组 元 素 的 属性 ,以 避免 多 个 XML 文档 中 的 元 素 重 名 。 

【 例 3-13】 一 个 简单 的 XML 文档 。 

下 面 是 Brion 给 Jane 的 便条 ,使 用 XML 格式 ,内 容 如 图 3-11 所 示 。 





文件 四 旧 ”格式 (Q W H) 
《?xml version="1.0” encoding="gb2312” ?> 
<note> 

to)Brion</to> 

<from>Jane</from> 

《heading>Reminder</heading> 


《body>Please give me a call tonight</body> 
</note> 





图 3-11 一 个 简单 的 xml 文档 


用 HTML 的 思想 ,双击 该 文档 在 浏览 器 中 打开 ,显示 如 图 3-12 所 示 。 





<?xml version="1.0" encoding="gb2312" ?> 
- <nNote> 
<to>Brion</to> 


<from>Jane</from> 

<heading>Reminder</heading> 

<body>Don't forget me this weekend</body> 
</note> 





3-12 XML 文档 在 浏览 器 中 的 显示 界面 
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在 浏览 器 中 ,我 们 看 到 了 一 棵 XML 文档 树 。 这 个 XML 文档 做 了 什么 呢 ? 好 像 什么 都 
没 做 。 我 们 需要 的 是 观念 上 的 转变 ,不 能 再 以 HTML 的 思想 来 理解 XML 了 。XML 不 是 
HTML 的 替代 品 ,HTMEL 设计 的 目的 是 用 来 显示 数据 ,重点 是 显示 数据 以 及 如 何 使 数据 的 
显示 更 美观 。XML 是 用 来 存储 数据 的 ,XML 设计 的 目的 是 用 来 描述 数据 结构 ,以 及 存储 
数据 ,实现 数据 存储 和 显示 的 分 离 ,数据 的 显示 则 是 通过 层 琵 样式 表 CSS 或 扩展 样式 表 转 
换 语言 XSLT 实现 的 。 


3.7.3 文档 类 型 定义 DTD 


在 XML 中 ,没有 像 HTML 一 样 拥 有 一 个 通用 的 标记 集合 ,标记 (在 XML 中 , 称 为 “元 
素 ”) 是 通过 文档 类 型 定义 (Document Type Difinition ,DTD) 来 实现 的 。DTD 定义 了 XML 
文档 中 可 以 使 用 的 元 素 符号 ,元 素 的 属性 、 元 素 的 排列 方式 /顺序 、 元 素 能 够 包含 的 内 容 等 ， 
其 目的 保证 确认 型 XML 解析 器 来 确定 XML 文档 数据 的 有 效 性 ,保证 XML 文档 结构 良 
好 。DTD 可 以 在 XML 文件 中 直接 定义 ,也 可 以 保存 为 一 个 完全 独立 的 文件 (. dtd) 。 因 此 ， 
DTD 分 为 内 部 DTD( 在 XML 文件 中 直接 定义 DTD) 和 外 部 DTD( 在 XML 文件 中 调用 已 
经 编辑 好 的 DTD 文件 ) 两 种 。 

1. 在 DTD 中 声明 XML 元 素 

一 个 内 部 DTD 声明 必须 写 在 XML 文档 的 头 部 ,在 处 理 指令 和 XML 根 元 素 之 间 ,一 般 
形式 为 : 

<! DOCTYPE rootElementName[ 

<! ELEMENT element - name (element - definition) > 





]> 


其 中 ,<! DOCTYPE 表示 开始 设 定 DTD。rootElementName 指定 此 DTD 的 根 元 素 的 
名 称 , 一 个 XML 文件 只 能 有 一 个 根 元 素 。 
<!ELEMENT element-name (element-definition ) > 为 元 素 定义 语句 , 其 中 , <! 
ELEMENT 是 XML 的 保留 字 , 表 示 开 始 元 素 定义 。element-name 是 为 元 素 所 起 的 名 称 ， 
element-definition 是 对 元 素 的 定义 ,就 是 说 < 元 素 >.…</ 元 素 > 之 间 能 够 包含 什么 内 容 。 元 
素 的 内 容 可 以 是 一 般 性 文字 ,也 可 以 是 其 他 元 素 。 
元 素 内 容 定义 (elementdefinition) 可 以 是 : 


EMPTY | #PCDATA | 元 素 | ANY 


(1) EMPTY ,没有 内 容 的 元 素 。 在 XML 文件 中 , 空 元 素 不 需要 结束 标记 ,但 必须 采用 
</ 空 元 素 名 > 这 样 的 写法 。XML 中 的 空 元 素 类 似 于 HTML 中 的 单 标记 , 空 元 素 不 标记 内 
容 , 但 可 以 设置 元 素 属 性 。 如 果 元 素 定义 为 EMPTY,EMPTY 不 需要 用 小 括号 括 起 来 , 即 
元 素 定义 语句 可 写 为 : 


<!ELEMENT element — name EMPTY > 


(2) #PCDATA ,声明 一 个 基本 元 素 , 元 素 内 容 为 可 解析 字符 数据 (Parsed Character 
Data) , 即 元 素 所 标记 的 内 容 将 被 XML 解析 器 解析 。 如 果 内 容 可 能 是 子 标记 、 实 体 等 ,它们 
一 并 被 解析 器 解析 ,从 而 得 到 正确 的 数据 关系 。 








解析 器 之 所 以 这 么 做 是 因为 XML 元 素 可 包含 其 他 元 素 , 例 如 ,定义 一 个 < name > 元 素 
如 下 : <!ELEMENT name(#PCDATA)>, 则 对 于 下 列 的 标记 内 容 : 


<name >< first>Bill </first >< last > Gates </last ></nanme> 


解析 器 会 把 < name > 元 素 的 内 容 解析 为 下 列 的 关系 : 


<name> 

<first >Bill </first > 

<last>Gates</last > 

</name > 

如 果 不 希 望 解析 器 解析 , 则 使 用 CDATA ,意思 是 字符 数据 (Character Data) ,CDATA 
是 不 会 被 解析 器 解析 的 文本 ,在 这 些 文本 中 的 标签 不 会 被 当 作 标记 来 对 待 ,其 中 的 实体 也 不 
会 被 展开 。 

(3) 元 素 ,声明 一 个 容器 元 素 , 即 元 素 还 可 以 包含 男 外 的 元 素 ,形成 一 种 租 套 和 层次 结 
构 。 声 明 容 器 元 素 的 基本 语法 为 : 


<! ELEMENT containerElement(containedElement1,..., containedElementn)> 


其 中 ,containerElement 为 容器 元 素 名 称 ,containedElement 至 containedElement, 为 被 
包含 的 元 素 。 被 包含 元 素 可 以 取 下 列 三 种 格式 之 一 : 

。 element, 要 求 该 元 素 有 且 只 有 一 个 值 。 

。 element 十 ,要 求 该 元 素 有 一 个 或 多 个 值 。 

。 element x ,要 求 该 元 素 有 零 个 或 多 个 值 。 

例如 ,<!ELEMENT 书籍 (名 称 , 作 者 ,价格 )> 表 示 定 义 了 一 个 容器 元 素 ( 即 标记 )“ 书 
籍 ”, 包 含 三 个 子 元 素 ,分 别 是 “名称 “ 作 者 ”和 “价格 ”。 

在 一 些 容器 元 素 的 声明 中 ,有 可 能 它 包含 的 子 元 素 是 在 多 个 子 元 素 中 的 一 个 ,那么 在 声 
明 此 父 元 素 时 ,就 可 以 把 它 声明 成 选择 性 元 素 ,可 供 选 择 的 子 元 素 用 "| ”分隔 。 例 如 : 
<!ELEMENT 配偶 (妻子 | 丈夫 )>。 

(4) ANY ,表明 所 有 可 能 的 元 素 以 及 可 解析 的 数据 。 

【 例 3-14】 文档 类 型 定义 DTD 举例 。 

对 于 例 3-13 中 的 添加 文档 内 容 进行 DTD 定义 ,XML 文档 (note. xml) 内 容 为 : 

<?xml version = "1.0”encoding = "gb2312”?> 


<! DOCTYPE note[ 
<! ELEMENT note (to, from, heading, body)> 


<! ELEMENT to (#PCDATA)> 
<! ELEMENT from ( 井 PCDRTR)> 
<!ELEMENT heading 。( 井 PCDRTRA)> 
<! ELEMENT body (#PCDATA)> 
]> 

< note > 


<to> Brion </to> 

< from> Jane </from> 

<heading > Reminder </heading > 

< body> Please give me a call tonight </body> 
</note> 
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2. 在 DTD 中 声明 元 素 属 性 
和 HTML 标记 一 样 ,XML 元 素 往往 也 包含 属性 ,元 素 属 性 定义 的 一 般 形 式 是 : 


<!ATTLIST element - name attribute - name Type Default ~- value> 


其 中 ,<! ATTLIST 表示 开始 属性 的 设 定 ,element-name 为 要 定义 属性 的 元 素 名 ， 
attribute-name 是 元 素 属 性 名 称 ,Type 是 该 属性 属性 值 的 类 别 ,元 素 属 性 值 类 型 见 表 3-24 。 


表 3-24 XML 中 元 素 属性 类 型 列表 



































类 型 名 描 述 

CDATA 表明 属性 值 可 以 是 任何 文本 字符 串 ,但 不 包括 小 于 号 “<” 和 西 文 双 引 号 *“"”, 如 要 使 
用 这 两 个 符号 可 以 使 用 实体 引用 “&lt;” 和 *&quot;” 

ENUMERATED | 枚 举 该 属性 的 取 值 范围 ,一 次 只 能 有 一 个 属性 值 能 够 赋予 属性 

NMTOKEN 表示 属性 值 只 能 由 字母 数字 .下 画 线 “: ”-" 等 符号 组 成 

NMTOKENS 表示 属性 值 能 够 由 多 个 nmtoken 组 成 ,每 个 nmtoken 之 间 用 空格 隔 开 

ID 该 属性 在 XML 文件 中 是 唯一 的 

IDREF 表示 该 属性 值 是 参考 了 另 一 个 元 素 的 id 属性 

IDREFS 表示 该 属性 值 是 参考 了 多 个 其 他 元 素 的 id 属性 ,这些 id 属性 的 值 用 空格 隔 开 

ENTITY 表示 该 属性 的 设 定 值 是 一 个 外 部 的 entity, 如 一 个 图 片 文件 

ENTITIES 该 属性 值 包含 了 多 个 外 部 entity, 不 同 的 entity 之 间 用 空格 隔 开 

A 属性 值 是 在 dtd 中 声明 过 的 notation( 声 明 用 什么 应 用 软件 解读 某 些 二 进 制 文件 ， 
如 图 片 文件 ) 


Default-value 是 指 该 属性 值 的 取 值 特点 ,有 4 种 不 同 的 属性 取 值 ,分 别 是 ， 
。 # REQUIRED, 表 示 在 标记 中 必须 给 定 属性 值 。 

。 #IMPLIED, 表 示 该 属性 值 可 以 省 略 。 

。 #FIXED, 表 示 一 个 固定 的 属性 值 。 

。 字符 串 ,指定 属性 的 默认 取 值 。 

下 面 是 一 组 XML 元 素 和 元 素 属性 声明 : 

<! ELEMENT FAMILY (PERSON + )> 


<! ELEMENT PERSON EMPTY> 
<!ATTLIST PERSON 


myId ID # REQUIRED 
truename CDATA # REQUIRED 
sex (male| female) "male" 


nickname NMTOKENS # IMPLIED 
parentId IDREFS # IMPLIED 


> 

上 述 XML 语句 为 元 素 PERSON 声明 了 mylId .truename、sex,nickname 和 parentId 五 
个 属性 。 属 性 myId 属性 类 别 为 ID ,表明 在 myId 属性 的 取 值 在 此 XML 文件 中 是 唯一 的 ， 
否则 将 出 现 解 析 错 误 。 此 属性 设 定 中 的 属性 取 值 要 求 为 # REQUIRED, 表 示 myId 属性 在 
元 素 PERSON 中 必须 出 现 , 和 否则 也 会 产生 解析 错误 。 

属性 truename 为 CDATA 属性 类 别 , 表 明 属 性 取 值 为 一 般 性 文字 。 属 性 sex 的 属性 值 
类 别 是 枚 举 类 型 , 取 值 范围 为 male 或 者 female: 如 果 在 XML 文件 中 没有 为 此 属性 赋值 , 属 


性 默认 取 值 是 一 个 字符 串 “male”。 

属性 nickname 属性 类 型 为 NMTOKENS, 规 定 了 其 取 值 的 字符 集 ,此 属性 可 以 省 略 。 
属性 parentId 的 类 型 为 IDREFS, 表 明 该 属性 的 值 必须 在 文档 中 出 现 过 ,该 属性 可 以 省 略 。 
如 果 该 属性 的 值 没 在 文档 中 出 现 过 ,解析 器 将 认为 该 文档 为 不 规范 文档 。 

根据 上 面 的 元 素 属性 说 明 ,我 们 看 下 面 的 XML 文档 数据 。 

<FAMILY> 

<PERSON myId = "P_ 1" truename = "Brion" nickname = "sun@# $ "/> 

<PERSON myId= "P_ 2" truename = "Jane" sex= "female" /> 

<PERSON myId = "P_3" truename = "Linda" sex = "female"/> 

<PERSON myId= "P_4" parentId= "P 1P 5" name = "David"/> 

</FAMILY> 

上 述 文档 数据 是 不 正确 的 ,因为 在 第 一 个 元 素 PERSON 的 nickname 属性 值 中 包含 了 
NMTOKENS 所 不 允许 的 字符 "@ # $”。 此 外 ,parentId 属性 值 中 出 现 了 值 *P_5”, 但 该 值 
没有 在 文档 中 出 现 过 。 

需要 说 明 的 是 ,许多 Web 浏览 器 (例如 IE) , 仅 支 持 XML 文档 的 结构 良好 ,并 没有 数据 
内 容 的 DTD 有 效 性 验证 功能 ,因此 ,在 XML 文档 的 语法 上 出 错时 ,浏览 器 打开 文档 时 会 报 
错 , 但 内 容 上 如 果 不 符合 DTD 定义 ,浏览 器 不 报错 。 

对 文档 的 结构 和 内 容 的 有 效 性 检查 ,可 通过 一 些 专用 的 XML 编辑 工具 ,例如 Altova 
XMLSpy 来 完成 ,打开 XML 文档 ,在 XML 菜单 中 ,包含 “检查 良 构 性 (F7)” 和 “验证 XML 
(F8)” 两 条 菜单 命令 ,第 一 条 用 于 检查 结构 是 否 良好 ,第 二 条 则 检查 内 容 是 否 有 效 。 例 如 ， 


对 于 上 述 文档 , 按 F8 键 ,在 信息 输出 窗口 ,显示 如 图 3-13 所 示 的 检查 结果 。 
日 四 文件 FE: \ 教 材 一 Web 技术 导论 第 3 版 )\Eanily. xm 无 效 。 

日 niclnmane” 0 的 值 ' sun8 交 里 的 ' >um8 录 ' 必须 天 特 名 称 符号 的 句法 规则 。 

| 一 错误 位 置 : EAIILI / FEESON / Qnicknane 


图 3-13 检查 结果 





3. 定义 实体 

在 XML 的 DTD 中 ,还 可 以 定义 实体 (Entity)。 实 体 实 际 上 起 一 种 类 似 " 宏 ” 的 作用 ,一 
些 常用 的 或 者 不 便于 直接 书写 的 文字 或 数据 .可 以 用 一 个 标识 定义 下 来 ,在 数据 中 可 以 直接 
引用 ,这 就 是 实体 。 实 体 的 引用 通过 “&” 来 引用 ,末尾 加 *;”。 

在 XML 中 ,有 5 种 预定 义 实体 ,分 别 是 : 字符 “&”(&amp;)、“<”(&lt;)、“>”(&gt;)、 
“9(&.quot;) 和 *”(&&apos;)。 除 了 这 些 预 定义 实体 ,还 允许 用 户 自己 定义 实体 ,例如 ,如 果 
在 XML 文档 中 需要 频繁 使 用 词组 “Good Luck”, 可 以 在 DTD 中 这 样 表示 : <! ENTITY gl 
"Good Luck">。 这 样 当 使 用 这 个 词组 "Good Luck?” 时 ,可 以 融入 &gl; ,从 而 可 以 避免 拼 错 
和 重复 融入 相同 的 信息 ,这 里 ,gl 就 是 实体 。 

在 XML 中 ,实体 可 以 分 成 内 部 实体 、 外 部 实体 和 参数 实体 三 种 类 型 。 内 部 实体 的 一 般 
形式 为 : 


<!ENTITY entityName "will be replaced string"> 


如 果 被 替换 的 文本 很 长 ,可 能 要 把 被 蔡 换 的 信息 存储 在 一 个 文件 中 。 可 以 通过 外 部 实 
体 参 考 来 实现 , 即 在 实体 名 和 文件 的 URL 中 使 用 关键 字 SYSTEM ,构成 外 部 实体 ,一 般 形 
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式 为 : 


<!ENTITY entityName SYSTEM "URL"> 


例如 ,下 面 一 个 关于 实体 定义 和 引用 的 XML 文档 ,代码 清单 如 下 : 


<?xm]l version = "1.0" encoding = "gb2312" ?> 
<! DOCTYPE message[ 

<! ELEMENT title ( #PCDATA)> 

<!1ENTITY hi "您 好 !"> 

<!ENTITY ans "ghi; 谢谢 ! 你 也 好 吗 ?"> 

]> 

<message> 

<title> Jane, &hi;,&ans;</title> 
</message > 


除 此 之 外 ,在 XML 中 ,还 提供 了 参数 实体 , 它 在 实体 定义 中 通过 在 实体 名 前 插入 百 分 
号 (%) 实 现 , 百 分 号 表示 该 实体 为 参数 实体 。 一 旦 被 定义 ,参数 定义 可 以 通过 用 百 分 号 和 分 
号 包围 参数 名 来 实现 。 例 如 : <! ENTITY % role"(boss | manager | employee)">。 

最 后 ,我 们 要 说 明 的 是 ,对 于 定义 面向 数据 的 文法 ,DTD 的 功能 ,特别 是 有 效 性 验证 , 远 
不 如 XML Schema, 但 是 DTD 的 实体 是 XML Schema 很 难 做 的 。 在 DTD 中 很 容易 定义 实 
体 , 但 是 这 种 功能 很 难 在 XML Schema 中 再 现 出 来 。 一 般 情况 下 ,实体 常见 于 叙述 性 文法 ， 
在 这 个 领域 DTD 的 地 位 仍然 很 稳固 。 

4. 字符 数据 段 

通过 预定 义 XML 实体 可 以 在 XML 文档 中 加 入 特殊 符号 ,如 果 需 要 大 量 的 特殊 符号 ， 
可 以 使 用 字符 数据 段 , 称 为 CDATA 段 。 

字符 数据 段 (CDATA 段 ) 是 指 不 被 XML 解析 器 解析 的 文本 段 , 即 使 这 些 文本 包含 了 
元 素 标记 、 实 体 引 用 ,以 及 特殊 符号 ,它们 均 不 被 解析 器 解析 。CDATA 段 可 以 使 用 户 在 一 
个 XML 文档 中 引用 大 量 的 特殊 符号 文本 块 , 而 不 需要 分 别 以 实体 的 形式 来 代表 每 一 个 特 
殊 字 符 。 比 如 JavaScript 代码 ,包含 大 量 “<"? 或 “& "字符 ,这 在 被 XML 解析 时 ,必须 使 用 预 
定义 实体 ,否则 将 发 生 错误 。 为 了 避免 错误 ,减少 麻烦 ,可 以 将 脚本 代码 定义 为 CDATA。 

CDATA 部 分 中 的 所 有 内 容 都 会 被 解析 器 忽略 ,CDATA 部 分 由 "<! [LCDATAL "开始 ， 
由 "]]>" 结 束 ,一 般 形式 为 : 

<! [CDATA[ 


text 
]]> 


其 中 ,text 是 包含 特殊 字符 的 文本 串 ,该 文本 不 被 XML 分 析 器 检查 。XML 处 理 器 负 
责 分 析 或 者 以 一 种 有 意义 的 方式 使 用 该 文本 块 。 其 中 的 左右 方 括号 “[” 和 *“]” 不 能 省 略 。 
例如 : 下 面 是 一 个 包含 CDATA 的 XML 文档 。 


<?xml version = "1.0"encoding = "gb2312" ?> 
<people> 

<! [CDATA[ 

<teacher> 

<name > Li </name > 


<sex> 女 </sex> 

<age>25 </age> 

<add> Shan Da Nan lu 27 号 </add > 

</techer> 

] ]> 

</people> 

在 浏览 器 中 打开 该 文档 时 ,CDATA 段 内 的 内 容 不 被 XML 解析 器 解析 为 XML 元 素 。 

5. DTD 的 优势 和 不 足 

文档 数据 类 型 定义 DTD 在 保证 XML 文档 数据 的 有 效 性 方面 提供 了 一 定 的 手段 ,定义 
DTD 有 如 下 两 个 方面 的 优点 : 

(1) 每 一 个 XML 文档 都 可 携带 一 个 DTD, 用 来 对 该 文档 格式 进行 描述 ,测试 该 文档 是 
否 为 有 效 的 XML 文档 。 通 过 定义 公用 外 部 DTD, 那 么 多 个 XML 文档 就 都 可 以 共享 使 用 
该 DTD, 使 得 数据 交换 更 为 有 效 。 甚 至 在 某 些 文档 中 还 可 以 使 内 部 DTD 和 外 部 DTD 相 结 
合 。 在 应 用 程序 中 也 可 以 用 某 个 DTD 来 检测 接收 到 的 数据 是 否 符合 某 个 标准 。 

(2) 对 于 XML 文档 而 言 ,虽然 DTD 不 是 必需 的 ,但 它 为 文档 的 编制 带 来 了 方便 。 加 
强 了 文档 标记 内 参数 的 一 致 性 ,使 XML 语法 分 析 器 能 够 确认 文档 。 如 果 不 使 用 DTD 来 对 
XML 文档 进行 定义 ,那么 XML 语法 分 析 器 将 无 法 对 该 文档 进行 确认 。 

虽然 如 此 ,DTD 也 有 其 内 在 的 不 足 , 主 要 表现 在 : DTD 有 自己 的 特殊 语法 ,其 本 身 不 是 
XML 文档 ; DTD 只 提供 了 有 限 的 数据 类 型 ,用 户 无 法 自 定义 类 型 ; DTD 不 支持 域名 机 制 。 
这 些 不 足 导致 了 XMLSchema 的 产生 。 但 是 ,由 于 现在 很 多 的 XML 应 用 是 建立 在 DTD 之 
上 的 ,能 读 懂 DTD 文件 以 及 在 必要 时 创建 简单 的 DTD 文件 仍然 是 很 重要 的 。 


3.7.4 Schema 及 其 应 用 


在 XML 1.0 规 范 中 ,虽然 DTD 实现 了 XML 文档 中 元 素 ( 标 记 ) 类 型 .元 素 属性 的 定 
义 , 对 于 XML 文档 的 结构 化 起 到 了 很 好 的 描述 作用 。 但 是 ,DTD 支持 的 数据 类 型 非常 有 
限 .扩展 性 较 差 , 没 有 一 种 机 制 保证 数据 的 应 用 方 和 数据 的 服务 方 对 数据 解释 的 一 致 。 为 
此 ,W3C 于 2001 年 5 月 正式 发 布 了 XML Schema 推荐 标准 ,提出 了 XML 架构 (Schema) 的 
概念 ,通过 XML Schema 给 XML 数据 标注 数据 类 型 ,从 而 使 得 数据 的 应 用 方 可 以 通过 
XML Schema 规范 对 所 交换 的 XML 数据 中 的 信息 进行 正确 的 解释 ,并 实现 自动 处 理 。 利 
用 XML Schema 规范 , Web 服务 方 和 应 用 方 无 须 事先 协调 所 要 交换 的 数据 类 型 ,从 而 解决 
了 XML 文档 数据 的 结构 和 类 型 一 致 性 解析 问题 ,使 XML 文档 结构 更 加 良好 。 

1. XML Schema 的 概念 

XML Schema 是 一 种 对 XML 文档 的 内 容 和 结构 进行 描述 和 定义 的 语言 。 在 XML 中 ， 
DTD 和 Schma 都 是 XML 文档 数据 的 约束 规则 ,和 DTD 相 比 ,Schema 具有 以 下 优点 : 
XML Schema 对 DTD 进行 了 扩充 ,引入 了 数据 类 型 、 命 名 空间 ,从 而 使 其 具备 较 强 的 可 
扩展 性 。DTD 提供 的 数据 类 型 只 有 CDATA、Enumerated NMTOKEN NMTOKENS 等 
10 种 内 置 (built-in) 数 据 类 型 。 这 样 少 的 数据 类 型 通常 无 法 满足 文档 的 可 理解 性 和 数据 交 
换 的 需要 。XML Schema 则 不 同 , 它 提供 了 更 加 丰富 的 数据 类 型 ,如 long、int、short、double 
等 常用 的 数据 类 型 。@XML Schema 利用 Namespace 将 文档 中 特殊 的 结 点 与 Schema 说 明 
相 联 系 , 一 个 XML 文档 可 以 有 多 个 对 应 的 Schema, 而 一 个 XML 文档 只 能 有 一 个 对 应 的 
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DTD。@XML Schema 文档 本 身 也 是 XML 文档 ,而 不 是 像 DTD 一 样 使 用 特殊 格式 。 开 发 
人 员 可 以 使 用 相同 的 工具 来 处 理 XML Schema 和 其 他 XML 信息 ,而 不 必 专 门 为 Schema 
使 用 特殊 工具 。 经 过 数 年 的 大 规模 讨论 和 开发 ,如 今 XML Schema 已 经 成 为 全 球 公认 的 
XML 环境 下 首选 的 数据 建 模 工具 。 

2. XML Schema 文档 结构 

XML Schema 本 身 就 是 一 个 XML 文件 ,不 同 的 是 ,Schema 文件 所 描述 的 是 引用 它 的 
XML 文件 中 的 元 素 和 属性 的 具体 类 型 , 即 是 对 于 XML 文档 中 元 素 的 定义 。 一 个 XSD 文 
档 就 是 一 个 命名 空间 ,可 以 被 其 他 的 XML 实例 文档 引用 。 

W3C XML Schema 是 使 用 最 为 广泛 的 XML Schema 架构 ,其 XML Schema 定义 
(XML Schema Ddefination ,XSD) 的 一 般 形 式 为 : 

<?xml version = "1.0" encoding = "gb2312"?> 

<xs:schema xmlns:xs = http://www. w3.org/2001/XMLSchema 


elementFormDefault = "qualified" 
attributeFormDefault = "unqualified"> 


(数据 类 型 定义 ,元素 声明 、 属 性 声明 ) 
</xs: schema > 


定义 Schema 的 XML 文档 扩展 名 为 . xsd, 文 档 的 根 元 素 一 定 为 <schema >, 用 于 声明 该 
XML 文档 是 一 个 XSD Schema 文档 。 元 素 < schema > 包含 若干 属性 ,常用 的 属性 有 : 

。 xmlns, 规 定 在 此 schema 定义 中 使 用 的 一 个 或 多 个 命名 空间 的 URI 引用 , 它 通常 是 
W3C 的 规范 的 XSD Schema。 可 以 使 用 多 个 命名 空间 ,对 于 每 一 个 命名 空间 ,通常 
分 配 一 个 前 级 ( 即 名 称 空间 的 别名 ) ,以 便于 引用 该 命名 空间 中 的 各 个 schema 组 件 
而 不 至 于 重 名 。 

如 果 某 个 命名 空间 没有 命名 , 则 写 为 xmlns 二 "命名 空间 " ,该 空间 为 默认 命名 空间 ,使 

用 它 的 元 素 无 须 前 级 。 

。 targetNamespace, 设 置 该 Schema 的 命名 空间 的 URI 引 用。 指出 当 XMLSchema 实 
例文 档 在 引用 该 Schema 时 ,xmlns 设置 的 名 称 空间 ,用 于 在 该 Schema 的 XML 实 
例文 档 中 使 用 该 Schema 中 的 数据 类 型 和 元 素 。 

。 elementFormDefault,attributeFormDefault ,可 选 。 指 出 任何 XML 实例 文档 在 使 用 
在 此 Schema 中 声明 过 的 元 素 或 属性 是 否 必 须 被 命名 空间 限定 。 如 果 设 置 为 
“unqualified”, 则 使 用 该 shchema 中 的 元 素 / 属 性 时 ,无 须 限 定 前 缀 : 如 设置 为 
“qualified”, 则 在 使 用 该 Schema 中 的 元 素 或 属性 时 ,必须 通过 命名 空间 前 级 限定 。 
两 个 属性 的 默认 值 均 为 *unqualified”。 

3. XSD 内 置 元 素 与 数据 类 型 

在 W3C XML Schema 规范 中 ,预定 义 了 大 量 的 XML 元 素 和 数据 类 型 ,供用 户 定义 自 
己 的 Schema 时 使 用 。 这 类 似 于 程序 设计 语言 中 的 关键 字 和 标准 函数 。 要 设计 自己 的 
Schema, 必 须 了 解 这 些 内 置 的 元 素 和 类 型 ,否则 将 无 法 完成 Schema 中 数据 类 型 和 元 素 的 定义 。 

(1) XSD 预定 义 元 素 

在 W3C XML Schema 文档 中 ,我 们 已 经 看 到 了 < xs:schema > 元 素 和 < xs:elment > 元 


素 ,这 就 是 在 命名 空间 http://www. w3. org/2001/XMLSchema 中 定义 的 元 素 , 称 为 预定 
义 元 素 。W3C XML Schema(XSD) 定 义 了 大 约 30 多 个 预定 义 元 素 , 每 个 元 素 定义 了 其 功 
能 和 属性 。 利 用 这 些 预 定义 元 素 , 用 户 可 以 设计 自己 的 Schema。 关 于 W3C XML Schema 
规范 预定 义 属性 的 详细 介绍 在 此 省 略 , 需 要 的 读者 可 参考 XML 的 专门 书籍 。 

为 了 更 精细 地 定义 数据 的 取 值 范围 和 取 值 模式 ,在 XSD 中 还 定义 了 一 组 内 容 取 值 约束 
及 限定 (Restrictions/Facets) 元 素 , 来 更 精确 地 限定 元 素 的 取 值 。 例 如 ,minExclusive( 内 容 
值 范围 最 小 ,但 不 包含 此 值 ), minInclusive( 内 容 值 范围 最 小 , 且 包 含 此 值 ),maxExclusive 
(内 容 值 范围 最 大 ,但 不 包含 此 值 ), maxInclusive (内 容 值 范 围 最 大 , 且 包 含 此 值 )， 
totalDigits( 指 定 最 大 数字 的 位 数 ) ,pattern( 正 则 语言 的 元 素 内 容 ) 等 。 通过 对 数据 类 型 设 
置 内 容 约 束 , 可 以 使 数据 的 有 效 性 设置 更 加 准确 。 

(2) XSD 内 置 数据 类 型 

在 W3C XML Schema 规范 中 ,给 出 了 大 量 的 标准 数据 类 型 ,这 些 数 据 类 型 的 定义 比 传 
统 的 计算 机 程序 设计 语言 中 的 数据 类 型 的 定义 更 加 精细 ,其 目的 就 是 保证 XML 实例 文档 
数据 更 加 严格 而 有 效 。 在 XSD 中 ,预定 义 的 内 置 数据 类 型 分 为 字符 串 数据 类 型 (14 种 )、 数 
值 型 数据 类 型 (14 种 ) .日 期 时 间 型 数据 类 型 (9 种 ), 以 及 Boolean、 进 制 等 杂项 数据 类 型 。 

例如 , 仅 字 符 串 数据 就 定义 了 14 种 不 同 的 字符 串 数据 类 型 ,包括 : string( 字 符 串 ,其 他 
字符 串 数据 类 型 均 衍生 于 string 字符 串 类 型 ), normalizedString (规格 化 字符 串 数据 类 型 ， 
不 包含 换行 符 “\10”、 回 车 “\13? 或 制 表 符 “\9’ 的 字符 串 ),token( 不 包含 换行 符 、 回 车 或 制 表 
符 、 开 头 或 结尾 空格 或 者 多 个 连续 空格 的 字符 串 ), Name(Token 的 衍生 类 型 ,包含 合法 
XML 名 称 的 字符 串 ,XML 名 称 的 第 一 个 字母 必须 是 字母 .下 夯 线 或 表意 字符 ), NCName 
(Name 的 衍生 类 型 ,不 包含 冒号 的 XML 名 称 , 以 字母 或 下 画 线 字符 开头 ,后 接 XML 规范 
中 允许 的 任意 字母 ,数字 、 重 音字 符 、 变 音符 号 、 句 点 . 连 字 符 和 下 画 线 的 组 合 ) 。 

对 于 数值 型 数据 类 型 ,定义 了 decimal( 十 进 制 数字 、 小 数 或 整数 ), 从 decimal 衍生 出 了 
byte( 有 正 负 的 8 位 整数 )、integer( 整 数值 )、positiveInteger( 仅 包含 正 值 的 整数 , 取 值 范围 
为 1 一 2 一 1)) ,negativeInteger( 仅 包含 负 值 的 整数 , 取 值 范围 为 一 2 一..…， 一 2 一 一 1) 等 
等 ,这 些 丰 富 的 数值 型 数据 类 型 ,对 数据 的 取 值 范围 进行 了 更 加 精细 的 定义 。 在 日 期 类 型 
中 ,定义 了 date( 定 义 一 个 日 期 值 ,格式 为 yyyy-mm-dd) ,time( 定 义 一 个 时 间 值 ,格式 为 hh: 
mm:ss) 以 及 duration( 定 义 一 个 时 间 间 隔 ) 等 类 型 。 

在 XSD 中 ,对 于 每 一 种 数据 类 型 ,除了 进行 了 更 加 精细 化 的 类 型 划分 外 ,还 可 以 附加 相 
应 的 类 型 的 限定 (Restriction) ,从 而 使 得 数据 的 取 值 更 加 精确 。 

4. 数据 类 型 定义 

在 XML Schema 中 ,除了 上 述 预定 义 的 数据 类 型 外 ,从 XML 语义 出 发 , 当 我 们 在 定义 
元 素 或 属性 时 ,对 它们 的 取 值 可 能 会 有 更 加 具体 的 约束 和 限制 ,例如 : 要 说 明 表 示 年 龄 的 一 
个 元 素 属性 ,这 个 属性 的 值 是 一 个 正 整 数 ,但 取 值 会 有 一 个 范围 ,怎么 来 表达 这 个 约束 呢 ? 
通过 XSD 预定 义 数据 类 型 和 约束 项 ,我 们 可 以 定义 自己 特定 的 数据 类 型 ,这 就 是 进行 数据 
类 型 定义 的 意义 和 目的 所 在 。 

定义 数据 类 型 的 目的 是 声明 元 素 , 根 据 元 素 的 复杂 程度 不 同 ,元 素 分 为 简单 类 型 元 素 和 
复杂 类 型 元 素 两 种 ,因此 ,数据 类 型 也 分 为 简单 类 型 和 复杂 类 型 两 种 。 简 单 类 型 元 素 的 值 不 
能 包含 元 素 或 属性 ,复杂 类 型 元 素 可 以 产生 在 其 他 元 素 中 符 套 元 素 的 效果 ,或 者 为 元 素 增加 
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属性 。 

数据 类 型 的 定义 有 两 种 方式 ,一 种 是 单独 地 定义 数据 类 型 ,并 为 类 型 命名 ; 另 一 种 方式 
是 将 数据 类 型 定义 写 在 元 素 声 明 中 。 两 种 方式 各 有 特点 ,应 根据 实际 情况 而 定 , 如 果 一 个 数 
据 类 型 只 在 一 个 元 素 中 使 用 ,在 元 素 声 明 时 定义 类 型 更 加 简单 。 

用 户 自 定义 数据 类 型 是 通过 XSD 内 置 元 素 和 预定 义 数据 类 型 完成 的 ,简单 类 型 定义 的 
一 般 形 式 是 : 
<xs:simpleType name = "name"> 


<xs:restriction base = "xs:datatypes"> 
<xs:facets_element value = "value"/> 


</xs:restriction > 
</xs:simpleType> 


在 上 述 简单 数据 类 型 定义 中 ,< xs:simpleType > 元 素 为 XSD 内 置 元 素 ,功能 是 定义 简 
单 类 型 ,name 属性 给 出 类 型 名 。 内 置 元 素 < restriction > 的 base 属性 设置 基础 数据 类 型 ,如 
string float .double 和 decimal 等 :也 可 以 是 用 户 定 义 的 简单 数据 类 型 。restriction 元 素 的 
子 元 素 facets_element 描述 数据 类 型 的 细节 规则 , 即 元 素 内 容 取 值 的 精确 约束 ,如 长 度 、 范 

【 例 3-15】 定义 一 个 简单 数据 类 型 age ,要求 取 值 为 18 至 65 的 整数 。 

分 析 : 该 类 型 不 仅 要 说 明基 本 类 型 ,还 需要 给 出 类 型 的 取 值 范围 ,这 可 通过 内 容 约 束 元 
素来 设 定 。 类 型 定义 如 下 : 

<xs:simpleType name = "age"> 

<xs:restriction base = "xs: integer"> 
<xs:minInclusive value = "18"/> 
<xs:maxInclusive value = "65"/> 

</xs:restriction> 

</xs: simpleType > 

【 例 3-16】 利用 上 面 定义 的 age 类 型 ,定义 一 个 年 龄 在 18 至 25 岁 的 青年 数据 类 型 
如 下 : 

<xs:simpleType name = "young"> 

<xs:restriction base = "age "> 
<xs:minInclusive value = "18"/> 
<xs:maxInclusive value = "25"/> 


</xs:restriction> 
</xs:simpleType > 


【 例 3-17】 定义 数值 型 数据 类 型 ,并 约束 取 值 的 格式 。 
示例 类 型 定义 如 下 : 


<xs:simpleType name = "productCode"> 
<xs:restriction base = "xs:string"> 
<xs:length value = "6" fixed = "true"/> 
</xs:restriction> 
</xs: simpleType> 


还 可 以 用 pattern 字符 串 比 对 的 正则 语言 模板 字符 串 : 


<xs:simpleType name = "productCode"> 
<xs:restriction base = "xs:string"> 
<xs:pattern value= "\d{2} - \d{3} = \d{7}"/> 
</xs:restriction> 
</xs:simpleType> 


从 上 面 的 几 个 例子 可 以 看 出 ,在 XSD 中 ,用 户 可 以 定义 取 值 范围 更 加 明确 的 数据 类 型 ， 
这 对 保证 XML 文档 内 容 的 正确 性 是 非常 有 意义 的 ,这 也 是 Schema 比 DTD 优越 的 地 方 。 
关于 复杂 数据 类 型 的 定义 ,由 于 篇 幅 所 限 ,在 此 不 做 介绍 。 

5. 声明 元 素 

声明 元 素 就 是 定义 元 素 的 名 字 和 内 容 模型 。 在 XML Schema 中 ,元 素 的 内 容 模型 由 其 
数据 类 型 定义 ,定义 一 个 元 素 , 即 声明 一 个 元 素 名 称 及 给 定 该 元 素 的 取 值 类 型 。 在 XML 
Schema 中 ,定义 XML 元 素 的 一 般 形 式 是 : 


<xs:element name="" type=" "default=""fixed=""/> 


其 中 ,element 为 XSD 内 置 元 素 , 表 明 该 命令 为 元 素 声明 ,name 属性 为 要 定义 的 元 素 的 
元 素 名 ,type 属性 设置 元 素 取 值 的 数据 类 型 , default 属性 给 定 默认 值 ,fixed 属性 指定 固 
定 值 。 

除了 上 述 通 过 元 素 类 型 声明 一 个 元 素 外 ,还 可 以 将 数据 类 型 的 定义 和 元 素 的 声明 进行 
合并 ,来 声明 一 个 元 素 。 一 般 形式 是 : 


<xs:element name=" "> 
元 素数 据 类 型 定义 


</xs:element > 


【 例 3-18】 用 两 种 不 同形 式 声 明 一 个 元 素 < car >, 元 素 内 容 为 Audi`BWM 或 Buick。 
示例 代码 如 下 : 
形式 一 : 


<xs:element name = "car" type = "carType" /> 
<xs:simpleType name = "carType"> 
<xs:restriction base = "xs: string"> 
<xs:enumeration value = "Rudi"/> 
<xs:enumeration value = "Buick"/> 
<xs:enumeration value = "BMW"/> 
</xs:restriction> 
</xs:simpleType > 


形式 二 : 


<xs:element name = "car"> 
<xs:simpleType > 
<xs:restriction base = "xs:string"> 
<xs:enumeration value = "Audi"/> 
<xs:enumeration value=" Buick"/> 
<xs:enumeration value = "BMW"/> 
</xs:restriction> 
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</xs:simpleType> 
</xs:element > 


【 例 3-19】 声明 一 个 元 素 < passeword >, 其 取 值 为 6 一 8 个 字母 .数字 字符 构成 的 字 
符 串 。 
示例 代码 如 下 : 


<xs:element name = "password"> 
<xs:simpleType > 
<xs:restriction base = "xs:string"> 
<xs:minLength value = "5"/> 
<xs:maxLength value = "8"/> 
<xs:pattern value= "[a— zA— 20- 9]{6,8}"/> 
</xs:restriction> 
</xs:simpleType> 
</xs:element > 


介绍 完了 XML Schema 中 声明 元 素 的 方法 后 ,下 面 我 们 通过 一 个 例子 来 比较 一 下 
DTD 和 XML Schema 的 不 同 。 假 定 有 一 个 简单 的 XML 文档 内 容 如 下 : 
< 图 书 > 
< 书 名 > 丁丁 历险 记 </ 书 名 > 


< 作者 > Georges Remi </ 作 者 > 
</ 图 书 > 


如 果 用 DTD 的 形式 来 定义 该 XML 文档 结构 的 话 ,DTD 定义 如 下 : 


<!ELEMENT 图 书 ( 书 名 ， 作 者 )> 
<!ELEMENT 书 名 (# CDATA)> 
<!ELEMENT 作者 (# PCDATA)> 


如 果 用 XML Schema 形式 来 定义 XML 文档 结构 , 则 XMLSchema 定义 如 下 : 


<xs:element name ="' 图 书 " type = "图 书 类 型 "/> 
<xs:complexType name = "图 书 类 型 "> 
<xs:all > 
<xs:element name = " 书 名 " type= "string"/> 
<xs:element name = "作者 " type= "string"/> 
</xs: sequence > 
</xs:complexType > 


其 中 ,元 素 < 图 书 > 的 取 值 类 型 为 用 户 定义 的 一 个 复杂 数据 类 型 ,因此 ,< 图 书 > 元 素 为 复 
杂 类 型 元 素 。 

6. 声明 元 素 属性 

复杂 元 素 可 以 拥有 子 元 素 和 元 素 属性 ,简单 类 型 没有 元 素 属性 ,因此 ,元 素 属性 的 声明 
通常 是 在 复杂 数据 类 型 的 定义 中 实现 的 。 声 明 元 素 属性 的 一 般 形式 是 : 





<xs:attribute name =" " type=" " default= 


其 中 ,attribute 为 XSD 内 置 元 素 ,功能 是 声明 元 素 属性 ,name 属性 设置 属性 名 ,type 设 
置 属性 值 的 数据 类 型 , default-value 是 属性 的 默认 值 ,use 设置 该 属性 是 否 为 必 选 属性 。 


use= "required|no"/> 


【 例 3-20】 声明 一 个 空 元 素 < product > ,拥有 一 个 长 度 为 6 个 数字 字符 的 编码 。 
示例 代码 如 下 : 


<xs:simpleType name = "idtype"> 
< xs :restriction base = "xs:string"> 
<xs:pattern value="[0-9]{6}"/> 
</xs:restriction> 
</xs:simpleType> 
<xs:complexType name = "prodtype"> 
<xs:attribute name = "prodid" type= " idtype"/> 
</xs:complexType > 
<xs:element name = "product" type = "prodtype" /> 


【 例 3-21】 声明 一 个 复杂 元 素 < bookorder >, 拥 有 两 个 子 元 素 < bookname > 和 
< customer > 以 及 一 个 orderid 属性 ,规定 一 个 订单 可 以 订 多 本 书 ,orderid 为 长 度 为 6 个 字 
符 的 字符 串 。 

要 实现 上 述 要 求 , 可 分 成 三 个 基本 步骤 ,如 下 : 

(1) 定义 简单 数据 类 型 ,进行 内 容 取 值 约束 和 限定 : 


<xs:simpleType name = "orderidtype"> 
<xs:restriction base = "xs: string"> 
<xs:pattern value= "[0 -9]{6}"/> 
</xs:restriction> 
</xs:simpleType > 


(2) 定义 元 素 属性 : 


<xs:complexType name = "bookordertype"> 
<xs: sequence> 
<xs:element name = "customer" type = "xs:string"/> 
<xs:element name = "bookname" type = "xs:string" maxOccurs = "unbounded"/> 
</xs: sequence> 
<xs:attribute name = "orderid" type = "xs:string" use= "required"/> 
<xs:anyAttribute/> 
</xs:complexType > 


(3) 声明 元 素 : 
<xs:element name = "bookorder" type= "bookordertype"/> 


在 元 素 属性 的 声明 中 ,使 用 了 < xs: anyAttribute/>, 可 以 使 创作 者 在 元 素 中 添加 
orderid 以 外 的 任意 数量 的 属性 ,但 是 这 些 属性 必须 通过 Schema 声明 ,例如 ,我们 在 Schema 
中 包含 属性 note 的 声明 : 


<xs:attribute name = "note"> 
<xs:simpleType > 
<xs:restriction base= "xs:string"> 
<xs:pattern value = "普通 | 加 急 "/> 
</xs:restriction> 
</xs: simpleType > 
</xs:attribute> 
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还 可 以 将 属性 应 用 到 < bookorder > 元 素 中 ,对 于 下 列 XML 内 容 : 


< bookorder orderid = "201201" note= "加 急 " status = "OK"> < customer > Hao </customer > 订购 
书 清单 < bookname > Web 技术 导论 (第 3 版 )</bookname ></bookorder > 


其 中 ,note 属性 是 有 效 的 ,虽然 未 在 < bookorder > 元 素 中 声明 ,但 status 属性 无 效 ,因为 


在 schema 中 未 声明 该 属性 。 上 述 内 容 看 起 来 不 够 自然 ,我 们 可 以 将 其 关系 用 层次 缩 进来 
表达 ,形式 如 下 : 


< bookorder orderid = "201201" note = "加 急 " status = "OK"> 
< customer > Hao </customer > 订购 图 书 清单 
<bookname > Web 技术 导论 (第 4 版 )</bookname> 
</bookorder > 


7. 将 架构 应 用 到 XML 文档 

用 户 可 以 在 一 个 XML 文档 的 内 部 应 用 一 个 架构 (Schema) ,从 而 使 用 架构 中 声明 的 元 
素 或 定义 的 数据 类 型 ,以 及 对 XML 文档 数据 进行 有 效 性 验证 。 在 XML 文档 中 应 用 架构 ， 
需要 在 该 文档 的 根 元 素 中 声明 xmlns ,一 般 形 式 是 


<rootelement xmlns = "Schema — URI XSD - file"> 


其 中 ,rootelement 为 用 户 希 望 应 用 架构 的 XML 文档 的 根 元 素 。Schema-URI 为 统一 
资源 标识 符 , 是 要 附加 的 架构 的 名 称 ,如 果 文 档 中 需要 应 用 多 个 Schema, 应 为 它们 的 命名 空 
间 命 名 ,以 便 在 使 用 不 同 的 Schema 中 的 元 素 时 ,不 至 于 出 现 元 素 重 名 。XSD-file 给 定 包含 
Schema 定义 的 xsd 文件 名 。 

下 面 我 们 设计 一 个 有 关 家 庭 的 Schema 文档 family. xsd, 并 利用 该 Schema 完成 一 个 
XML 文档 Myfamily. xml 数据 的 验证 。 

代码 清单 : 模式 文件 family. xsd 


<?xml version = "1.0" encoding = "gb2312"?> 
<xs:schema xmlns:xs = "http://www.w3. org/2001/XMLSchema" 
elementFormDefault = "qualified"> 
<xs:complexType name = "familytype"> 
<xs:sequence> 
<xs:element name = "father" type= "xs:string" min0ccurs = "0"/> 
<xs:element name = "mother" type= "xs:string" min0ccurs = "0"/> 
<xs:element name = "boy" type = "xs:string" minOccurs = "0" maxOccurs = "5"/> 
<xs:element name = "girl" type = "xs:string" min0ccurs = "0" maxOccurs = "5"/> 
</xs: Sequence > 
</xs:complexType > 
<xs:complexType name = "hometype"> 
<xs:all> 
<xs:element name = "house" type = "xs:string" minOccurs = "1"/> 
</xs:all> 
</xs:complexType > 


<xs:element name = "familys"> 
<xs:complexType> 
<xs:sequence> 


<xs:element name = "family" type= "familytype" maxOccurs = "unbounded" /> 
</xs:sequence > 
</xs:complexTYpe> 
</xs:element > 
<xs:element name = "family" type= "familytype"/> 
<xs:element name = "home" type = "hometype"/> 
</xs:schema> 


下 面 是 一 个 XML 实例 文档 myfamily. xml, 代 码 清单 如 下 : 
代码 清单 : myfamily. xml 
<?xml version = "1.0" encoding = "gb2312"?> 
<familys xmlns:xsi= http://www. w3.org/2001/XMLSchema - instance 
xsi:noNamespaceSchemaLocation = "family.xsd"> 
<family> 
< father > Tony Smith </father > 
<boy> Linda </boy> 
</family> 
<family> 
< father > David Smith</father > 
<boy>mike </boy > 
<girl> Mary </girl> 
<girl> Susan </girl> 
</family> 
<family> 
< father > Michael Smith</father > 
</family> 
</familys> 
在 XML 中 ,Schema 是 验证 XML 实例 文档 数据 有 效 性 的 手段 。 由 于 XSD 内 置 元 素 较 
多 以 及 预定 义 数据 类 型 较 多 ,手工 编写 XML 文档 和 XML Schema 是 非常 麻烦 的 ,需要 记忆 
大 量 的 预定 义 元 素 和 数据 类 型 ,因此 ,在 实际 应 用 中 ,可 以 借助 于 XML 开发 工具 来 完成 ,这 
些 工具 还 提供 XML 数据 有 效 性 和 文档 结构 良好 的 检查 。 


3.7.5 XML 相关 技术 


XML 技术 包含 的 内 容 很 多 ,除了 XML 元 语言 规范 外 ,我们 对 于 XML 文档 的 有 效 性 、 
XML 数据 处 理 .XML 数据 转换 、XML 数据 显示 等 都 是 XML 技术 非常 重要 的 内 容 之 一 。 
了 解 这 些 技术 及 它们 的 用 途 、 相 互 之 间 的 关系 ,对 于 理解 XML 技术 至 关 重 要 。 

1. 可 扩展 样式 语言 XSL 

W3C 给 出 了 两 种 样式 单 语言 的 推荐 标准 ,一 种 是 层 释 样式 表 CSS(Cascading Style 
Sheets) , 另 一 种 是 可 扩展 样式 表 语 言 XSL (eXtensible Stylesheet Language)。 样 式 表 
(Style Sheet) 是 一 种 专门 描述 结构 文档 表现 方式 的 文档 , 它 既 可 以 描述 这 些 文档 如 何在 屏 
幕 上 显示 ,也 可 以 描述 它们 的 打印 效果 。 使 用 样式 表 的 目的 就 是 要 保证 文档 内 容 和 文档 显 
示 的 彻底 分 离 。CSS 主要 应 用 在 HTML 的 页 面 制作 ,而 可 扩展 样式 语言 XSL (eXtensible 
Style Language) 则 是 用 于 描述 XML 文档 样式 的 语言 。 

对 于 XML 文档 数据 ,我 们 可 能 还 需要 将 XML 数据 以 不 同 的 方式 进行 显示 。 在 XML 
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技术 中 ,我 们 可 以 和 HTML 一 样 ,定义 样式 表 (. css) 文 件 ,在 XML 文档 的 序言 中 增加 声明 
显示 该 XML 文档 要 使 用 的 样式 表 , 处 理 指 令 为 : <? xml-stylesheet type 一 "text/css”href 一 
"mycssfile. css"? >, 然 后 通过 在 XML 元 素 中 使 用 class 属性 和 id 属性 来 定制 元 素 的 显示 。 
但 是 ,必须 要 记 住 的 是 : XML 技术 的 核心 是 将 数据 和 数据 的 显示 分 离 , 任 何在 XML 文档 
内 容 中 包含 显示 信息 的 XML 文档 都 认为 是 含有 bug 的 ,因此 ,这 样 的 设计 不 符合 XML 的 
思想 。XML 技术 的 基本 规则 是 ,XML 文档 存储 数据 本 身 , 对 数据 的 显示 则 通过 XML 数据 
的 应 用 程序 来 完成 。 
基于 上 述 两 个 方面 的 原因 ,W3C 颁布 了 可 扩展 样式 语言 XSL 规范 ,用 于 XML 文档 的 
转换 和 显示 。XSL 在 转换 XML 文档 时 分 为 两 个 过 程 : 首先 转换 文档 结构 ,然后 将 文档 格 
式 化 输出 。 这 两 步 可 以 分 离开 来 并 单独 处 理 ,因此 XSL 在 发 展 过 程 中 逐渐 分 为 XSLT 
(XSL Transformations) 和 XSL-FO(CXSL Formatting Objects) 两 种 分 支 语言 。XSLT 用 来 
实现 XML 文档 结构 的 转换 ,其 中 ,将 XML 文档 转换 为 HTML 文档 是 目前 XSLT 最 主要 
的 功能 。XSL-FO 的 作用 则 类 似 CSS 在 HTML 中 的 作用 。 
作为 可 扩展 样式 表 语 言 ,XSL 文档 有 其 特定 的 文档 结构 和 语法 ,定义 了 大 量 的 内 置 元 
素 , 用 于 获取 XML 文档 的 数据 ,然后 进行 转换 ,以 特定 的 样式 进行 输出 。 
2. XML 路 径 语言 XPath 
XML 路 径 语言 XPath(XML Path Language) 是 用 来 查询 和 定位 XML 文档 中 的 元 素 
或 文本 的 一 种 通用 查询 语言 。 不 管 是 在 XSLT 还 是 XPointer 规范 中 ,都 需要 定位 XML 文 
档 树 中 的 元 素 .元 素 属性 或 元 素 区 间 ,XPath 规范 的 目的 就 是 向 XSLT 和 XPointer 共同 需 
要 的 功能 提供 统一 的 语法 和 语义 ,可 以 说 ,XPath 是 一 种 XML 文档 内 容 寻 址 语言 。 有 特定 
的 语法 和 预定 义 函 数 ,用 于 对 XML 文档 进行 操作 。 
XPath 将 一 个 XML 文档 建 模 成 为 一 棵 节点 树 ,通过 路 径 表 达 式 来 实现 对 XML 文档 内 
容 的 定位 ,在 XML 文档 中 选择 结 点 或 结 点 集 , 从 而 实现 对 XML 文档 中 的 元 素 和 属性 进行 
遍历 。XPath 1.0 于 1999 年 11 月 16 日 成 为 W3C 推荐 标准 ,2007 年 1 月 23 日 ,XPath 2.0 
成 为 W3C 推荐 标准 ,很 好 地 修复 了 XPath 1.0 版 中 的 问题 。 
3. XML 查询 语言 XQuery 
现在 , 越 来 越 多 的 信息 以 XML 格式 进行 存储 和 交换 ,XML 数据 查询 成 为 重要 的 功能 
需求 。1999 年 ,W3C 成 立 了 XML 查询 工作 组 ,开始 研究 制定 相关 标准 规范 。 经 过 一 个 漫 
长 的 时 期 ,2005 年 11 月 ，W3C 发 布 了 关于 XML 查询 的 8 个 备 选 推荐 规范 。2007 年 1 月 
23 日 , W3C 才 将 XPath 2.0 和 XQuery 1. 0 确定 为 推荐 标准 。 
XQuery 1.0 是 XPath 2.0 的 扩展 集 , 除 了 拥有 XPath 2. 0 的 特点 外 ,增加 了 排序 、 重 
装 、 构 造 功能 ,而 且 实现 了 XPath 2. 0 未 能 实现 的 数据 浏览 和 过 滤 方 面 的 性 能 。XQuery 的 
优点 包括 : 
。 相 比 XSLT 的 查询 语句 ,XQuery 查询 语句 代码 更 简洁 。XQuery 执行 查询 需要 的 
代码 比 XSLT 少 , 所 以 它 的 执行 效率 也 高 。 
。 当 XML 数据 是 类 型 化 的 ,那么 XQuery 是 一 个 强 类 型 语言 , 它 能 够 通过 避免 非法 的 
类 型 转换 以 及 确认 类 型 是 否 可 以 在 查询 操作 中 使 用 ,来 提高 查询 语句 的 执行 效率 。 
。 XQuery 能 当 作 弱 类 型 语言 使 用 ,为 非 类 型 化 数据 提供 更 强 的 功能 ,将 会 被 主流 的 数 
据 库 提供 商 所 支持 。 


由 于 本 书 篇 幅 所 限 , 关 于 XQuery 的 基本 语法 和 应 用 请 参考 W3C 的 具体 规范 。 

4. 可 扩展 连接 语言 XLL 

在 XML 的 规范 中 ,并 没有 规定 有 关 文 件 链接 的 问题 。 为 了 使 XML 文件 也 能 够 有 类 似 
HTML 文件 超 链 接 的 功能 , W3C 制定 了 XML 可 扩展 链接 语言 规范 XLL (eXtensible 
Linking Language) ,分 为 三 个 部 分 : XLink 语言 .XPointer 语言 和 XML Base。 其 中 XLink 
是 规定 XML 文件 之 间 的 链接 规范 (和 HTML 中 的 外 链接 相似 ),XPointer 是 规定 XML 文 
件 中 不 同位 置 之 间 的 链接 规范 (类 似 HTML 中 的 书签 )。 通 过 XLink 规范 和 XPointer 规 
范 可 以 定义 类 似 HTML 中 < a > 标记 的 超 链接 功能 ,然后 通过 XSL 显示 该 超 链 接 。 


本 章 小 结 


本 章 首先 介绍 了 标记 语言 的 概念 ,产生 和 发 展 ,对 几 种 常见 的 标记 语言 进行 了 简要 说 
明 ,并 分 析 了 它们 的 定位 和 不 同 。 重 点 讲解 了 HTML 规范 ,特别 是 CSS 技术 ,讲解 了 改变 
标记 默认 显示 样式 的 不 同方 法 ,各 自 的 优 缺点 , 块 元 素 和 行内 元 素 的 概念 。 对 HTML 5 和 
CSS 3 中 出 现 的 新 概念 在 相应 的 章节 进行 了 介绍 。 对 于 XML 标记 语言 ,讲解 了 XML 的 定 
位 以 及 XML 和 HTML 的 本 质 区 别 。 简 要 介绍 了 XML 文档 结构 ,数据 类 型 定义 DTD， 
XMLSchema 技术 ,在 此 基础 上 ,介绍 了 XML 文档 中 的 元 素 及 属性 的 定义 ,展现 了 XML 文 
档 的 优势 。 最 后 ,对 XML 相关 技术 ,包括 XSL 、XPath、XQuery 等 技术 进行 了 简要 介绍 , 讲 
解 了 它们 和 XML 实例 文档 的 关系 ,从 而 对 XML 技术 建立 一 个 全 面 的 认识 。 


习 题 


一 、 简 答题 

1. 什么 是 HTML? 简 述 HTML 文档 的 基本 结构 。 

2. 关于 HTML 标记 ,回答 下 列 问题 

(1) 标记 的 属性 是 如 何 分 类 的 ? 有 何 区 别 ? 

(2) 不 同 的 标记 拥有 的 属性 不 同 , 但 有 些 属性 是 大 部 分 标记 都 有 的 , 称 为 通用 属性 ,有 
哪些 常用 的 通用 属性 ?并 说 明 这 些 属性 的 作用 。 

(3) 要 修改 标记 的 默认 显示 样式 ,有 哪 几 种 方法 ? 

3. 简 述 HTML 中 表单 < form > 标记 的 target 属性 的 作用 。 

4. 关于 CSS 技术 ,回答 下 列 问题 ; 

(1) 什么 是 层 释 样式 表 CSS? 使 用 CSS 有 什么 好 处 ? 

(2) 什么 是 样式 表 ? 

(3) 什么 是 内 部 样式 和 外 部 样式 ? 

5. 随 着 网 络 接 入 终端 的 多 样 化 ,在 网 页 设计 中 ,有 哪些 主要 的 页 面 布局 ? 说 明 各 自 的 

6. 在 HIML 5 文档 编辑 中 ,出 现在 编辑 工具 中 的 汉字 正常 显示 ,但 在 浏览 器 中 显示 乱 
码 。 比 如 ,使 用 FrontPage 编辑 网 页 ,设置 文字 编码 < meta charset 一 "utf-8" />, 汉 字 显 示 正 
常 ,但 在 浏览 器 中 打开 网 页 时 ,会 显示 乱码 。 如 果 字 符 集 设置 为 < meta charset 二 "gb2312" />， 





HHTML 与 XML 基础 


Web 技 大 导论 (种 4 版 ) 





则 在 浏览 器 显示 正常 。 为 什么 ? 

7. 一 个 XML 文档 有 哪 几 个 组 成 部 分 ? 简 述 每 一 部 分 的 功能 。 

8. 在 XML 文档 中 ,定义 文档 类 型 和 文档 架构 (Schema) 的 目的 是 什么 ? 

9. XML 技术 实现 了 数据 和 显示 的 分 离 ,关于 XML 文档 内 容 的 显示 ,回答 下 列 问题 : 

(1) 如 果 不 声明 XML 文档 的 显示 样式 ,在 浏览 器 中 加 载 一 个 XML 文档 时 ,显示 的 结 
果 是 什么 ? 

(2) XML 文档 树 显示 了 文档 数据 的 结构 ,如 何 进行 XML 文档 的 格式 化 显示 ? 

10. XML 与 HTML 相 比 有 什么 本 质 不 同 ? 

二 、 阅 读 理 解 题 

1. 在 CSS 中 ,提供 了 一 组 定位 属性 ,可 以 对 块 级 元 素 和 行内 元 素 进行 定位 ,改变 正常 的 
输出 流 结果 ,阅读 下 列 代码 ,说 明 其 输出 结果 。 

(1) 块 级 元 素 的 相对 定位 


<html> 

<head> 

<style type = "text/css"> 
p. pos_left {position:relative;left: - 20px} 
p+p{color:#ff0000} 

</style> 

</head> 

<body> 

<p> 段 落 的 正常 输出 位 置 </p> 

<p class= "pos_left"> 段 落 在 输出 时 相对 于 其 正常 位 置 向 左 移动 </p> 

<p> 相 对 定位 会 按照 元 素 的 原始 位 置 对 该 元 素 进 行 移 动 .</p> 

</body > 

</html > 


(2) 块 级 元 素 的 绝对 定位 


< html > 

<head > 

< style type = "text/css"> 

hi. pos_abs{position:absolute; left:100px; top:150px} 
img{ position:absolute; bottom:0px} 

</style> 

</head > 

<body> 

<hl class = "pos_abs"> 这 是 带 有 绝对 定位 的 标题 </hl > 
<p> 通 过 绝对 定位 ,元 素 可 以 放置 到 页 面 上 的 任何 位 置 .</p> 
< img class= "normal" src= "images/smile.gif" /> 
</body > 

</html > 


(3) 在 文本 中 垂直 排列 图 像 


<html > 
<head> 


< style type = "text/css"> 
img.top {vertical ~ align:text ~ top} 
img. bottom {vertical ~ align:text - bottom} 
</style> 
</head> 
<body> 
<p> 图 片 与 文字 < img class = "top" border = "0" src = "images/smile.gif" /> 上 重 齐 .</p> 
<p> 图 片 与 文字 < img class = "bottom" border = "0" src= "images/smile.gif" /> 下 重 齐 .</p> 


</body > 
</html > 
(4) 元 素 的 摆 放 顺序 
< html > 
<head > 


< style type = "text/css"> 
img.x{position:absolute; left: Opx; top:0px;z — index: 一 1} 
</style> 
</head> 
<body> 
<hl > 这 是 一 个 标题 </hl > 
< img src= "images/smile. jpg"class = "x" /> 
<p>z- index 的 默认 值 0,z- index: -1 拥有 更 低 的 优先 级 ,将 作为 背景 .</p> 
</body > 
</html > 


2. 在 HTML 中 ,经 常 使 用 div、span 元 素 , 并 结合 CSS 的 定位 浮动 属 性 ,实现 特定 的 
输出 效果 。 阅 读 下 列 代码 ,说 明 运 行 结 
(1) 图 层 的 浮动 


<html > 

<head > 

< style type = "text/css"> 

div{margin:0 0 15px 20px; border:1px solid black; width:100px;text - align:center;float:right} 
</style> 

</head> 

<body> 

<div> 

< img src = "images/mydog. gif" /><br /> 

my dog 

</div> 

<p> 

在 该 段落 中 , div 元 素 的 宽度 是 100 像素 ,其 中 包含 图 像 . div 元 素 浮动 到 右 侧 . 同时 , div 元 素 添加 了 
外 边 距 ,使 div 与 文本 保持 一 个 距离 ,此 外 ,还 向 div 添加 了 边框 和 内 边 距 。 

</p> 

</body > 

</html > 


(2) 段落 的 首 字母 浮动 于 左 侧 


<html > 
<head > 
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< style type = "text/css"> 

span {width:0.7em;font ~ family:algerian, courier; font ~ size:400 % ; line — height:80 % ;float: 
left} 

</style> 

</head > 

<body> 

<p><span>T</span>his is some text. 在 段落 中 ,文本 的 第 一 个 字母 包含 在 一 个 span 元 素 中 .这 个 
span 元 素 的 宽度 是 当前 字体 尺寸 的 0.7 倍 . span 元 素 的 字体 尺寸 是 400% , 行 高 是 80% 。</p> 
</body > 

</html > 
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【本 章 导 读 】 

在 互联 网 中 ,网 页 是 用 户 和 Web 进行 交互 的 主要 界面 ,用 户 通过 网 页 进行 信息 浏览 和 
实现 与 Web 应 用 的 交互 。 网 页 是 存储 在 Web 服务 器 上 的 一 个 个 HTML、JSP、ASP、PHP 
等 各 种 类 型 的 文档 在 浏览 器 中 的 显示 ,一 个 Web 应 用 或 者 一 个 网 站 是 由 大 量 的 网 页 构成 
的 ,并 通过 页 面 间 的 超 链 接 表达 和 实现 业务 逻辑 。 网 页 作为 Web 应 用 的 用 户 界 面 , 不 仅 要 
强调 它 的 功能 性 ,还 必须 强调 它 的 艺术 性 效果 ,追求 良好 的 用 户 体验 ,这 就 使 得 Web 应 用 的 
设计 融入 了 更 多 非 技术 的 要 素 , 网 页 设计 成 为 Web 前 端 设计 与 开发 的 重要 组 成 部 分 。 

本 章 首 先 介 绍 了 页 面 设计 的 概念 ,将 页 面 设计 分 成 面向 业务 逻辑 的 功能 性 设计 (交互 设 
计 ) 和 面向 用 户 体验 的 视觉 设计 两 个 不 同 的 层面 。 然 后 重点 讨论 了 面向 用 户 体验 的 页 面 布 
局 设计 、 页 面 视觉 设计 和 页 面 效 果 设 计 的 有 关 问 题 。 介 绍 了 系统 开发 中 代码 编辑 器 、 网 页 制 
作 工 具 和 集成 开发 环境 的 概念 以 及 各 自 的 特点 ,并 对 SublimeText、Dreamweaver 和 
MyEclipse 进行 了 介绍 。 最 后 以 Dreamweaver 工具 为 例 , 以 HTML 规范 框架 为 主线 ,讲解 
了 使 用 Dreamweaver 等 开发 工具 进行 网 页 设计 的 一 般 过 程 , 进 一 步 加 深 对 HTML 规范 的 
理解 。 

【知识 要 点 】 

4.1 节 :前端 设 计 , 后 端 设计 ,网 页 设计 ,页 面 功 能 与 内 容 设计 ,用 户 体 验 ,页 面 布 局 , 显 
示 分 辨 率 , 图 像 分 辨 率 , 图 片 大 小 ,视觉 设计 ,效果 设计 。 

4.2 节 : 代码 编辑 器 ,多 点 编辑 ,代码 补 齐 .Dreamweaver, 集 成 开发 环境 ,工作 空间 
(Workspace) ,项 目 (Project) 。 

4.3 节 : Dreamweaver 网 页 制作 工具 ,代码 视图 ,设计 视图 , 拆 分 视图 ,实时 视图 。 

4.4 节 : 文本 格式 化 ,插入 图 片 , 插 入 表格 ,插入 表单 ,插入 div。 

4.5 节 : 标记 属性 ,CSS 样式 属性 ,Intellisense 技术 。 

4.6 节 : 内 联 样式 ,内 部 样式 ,外 部 样式 。 


4.1 网 页 设计 基础 


网 站 或 者 说 Web 系统 ,都 是 由 大 量 的 网 页 构成 的 ,网 页 是 系统 与 用 户 之 间 的 交互 界面 。 
与 传统 的 应 用 程序 界面 不 同 , 网 页 是 内 容 和 艺术 的 综合 体 。 网 页 在 实现 Web 应 用 系统 功能 
的 同时 ,表现 出 更 大 的 灵活 性 、 随 意 性 和 艺术 性 。Web 开发 团队 的 人 员 也 更 加 多 样 ,除了 传 
统 的 系统 设计 人 员 、 代 码 开 发 人 员外 ,开始 出 现 了 美工 人 员 , Web 设计 已 经 越 来 越 明显 地 分 
成 面向 业务 逻辑 的 功能 性 设计 (交互 设计 ) 和 面向 用 户 体验 的 视觉 设计 两 个 不 同 的 层面 ,网 
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页 设计 成 为 Web 系统 设计 中 前 端 设计 的 重要 组 成 部 分 。 
4.1.1 Web 系统 设计 


计算 机 软件 系统 的 发 展 可 以 简单 地 分 为 单机 应 用 、 客 户 / 服 务 器 (Client/Server,C/S) 应 
用 和 浏览 器 /服务 器 (Browser/Server,B/S) 应 用 几 种 模式 。 计 算 机 软件 模式 上 的 发 展 是 随 
着 计算 机 技术 的 发 展 而 变化 的 。 在 计算 机 发 展 的 早期 ,计算 机 网 络 还 未 诞生 ,所 有 的 计算 机 
应 用 都 是 安装 在 一 台 计算 机 上 运行 和 使 用 的 ,计算 机 应 用 表现 为 一 种 单机 应 用 模式 。20 世 
纪 70 年代, 出 现 了 计算 机 网 ,计算 机 应 用 分 布 在 网 络 中 ,出 现 了 C/S 模式 。20 世纪 90 年 
代 , 随 着 互联 网 技术 的 发 展 和 应 用 的 普及 ,浏览 器 /服务 器 (B/S) 计 算 机 应 用 模式 快速 发 展 ， 
成 为 今天 计算 机 应 用 的 主流 模式 ,计算 机 应 用 系统 又 称 为 Web 系统 。 

对 于 所 有 的 计算 机 软件 系统 ,不 论 什 么 样 的 应 用 模式 ,不 论 其 规模 和 功能 大 小 ,从 概念 
上 讲 , 一 个 计算 机 软件 系统 都 可 以 分 成 数据 和 程序 两 个 部 分 。 所 谓 数 据 , 就 是 我 们 要 处 理 的 
业务 数据 ,而 程序 则 是 对 数据 的 处 理 , 是 业务 逻辑 的 表达 和 编码 的 实现 。 从 逻辑 的 角度 讲 ， 
一 个 软件 系统 则 可 以 分 为 数据 ,业务 逻辑 和 连接 逻辑 几 个 方面 。 业 务 逻 辑 是 对 领域 业务 的 
编程 (函数 ) 实 现 , 连 接 逻 辑 是 指 这 些 业务 逻辑 之 间 的 连接 和 调用 关系 (调用 机 制 , 如 函数 调 
用 ,消息 机 制 等 ), 用 以 实现 一 项 复杂 的 业务 关系 。 

传统 的 软件 系统 设计 包含 了 系统 功能 设计 和 数据 结构 设计 两 个 主要 部 分 ,传统 软件 系 
统 的 特点 是 界面 采用 窗口 十 对 话 框 模式 ,其 结构 是 相对 统一 的 。 但 是 , Web 系统 不 同 ,用 户 
界面 体现 为 一 系列 的 网 页 ,网 页 中 既 要 展示 数据 内 容 、 提 供 输入 输出 接口 ,还 可 以 表达 调用 
逻辑 ,这 些 要 素 的 组 织 表 现 出 很 大 的 灵活 性 、 随 意 性 和 艺术 性 ,这 就 决定 了 Web 系统 设计 不 
同 于 传统 的 软件 系统 设计 。 

在 一 个 Web 系统 中 ,程序 分 为 客户 端 脚本 程序 和 服务 端 脚本 程序 两 部 分 ,因此 , Web 
系统 设计 一 般 分 为 前 端 设 计 和 后 端 设 计 两 部 分 。 所 谓 前 端 设 计 , 是 指 面向 用 户 端的 设计 , 包 
括 网 页 设计 、UI 设计 和 客户 端 脚本 程序 设计 。 后 端 设 计 则 是 指 服务 器 端的 设计 ,主要 是 数据 
操作 的 设计 。Web 前 端 针 对 的 是 用 户 体验 和 用 户 交互 ,在 前 端 设计 中 ,主要 利用 HTML、CSS 
和 JavaScript 技术 ,来 保证 网 页 的 功能 和 用 户 体验 。Web 后 端 针 对 的 是 服务 器 端的 面向 业 
务 迎 辑 与 数据 处 理 的 编程 ,主要 是 数据 库 操 作 ,以 支撑 系统 的 数据 存储 和 管理 。 


4.1.2 MVC 设计 模式 


在 软件 系统 的 开发 中 ,系统 设计 人 员 追 求 的 目标 就 是 要 保证 系统 的 可 维护 性 、 可 扩展 性 
和 灵活 性 等 。 要 实现 这 样 的 目标 ,高 内 聚 、 低 耦合 是 一 种 重要 的 保证 。 围 绕 这 样 的 设计 目 
标 , 出 现 了 许多 设计 模式 。 在 Web 开发 中 ,模型 -视图 -控制 器 (Model-View-Controller， 
MVC) 设 计 模 式 是 一 种 比较 流行 的 设计 模式 。MVC 设计 模式 并 不 是 一 种 新 的 模式 , 它 是 
Xerox PARC 在 20 世纪 80 年 代为 编程 语言 Smalltalk-809 发 明 的 一 种 软件 设计 模式 ,其 核 





四 ”Smalltalk 是 由 美国 施乐 公司 帕 洛 阿尔 托 研究 中 心 (Xerox PARC) 于 20 世纪 70 年 代 开 发 的 面向 对 象 程序 设计 
语言 ,被 公认 为 历史 上 第 二 个 面向 对 象 的 程序 设计 语言 ,是 第 一 个 真正 的 集成 开发 环境 (IDE)。Smalltalk 对 许多 其 他 程 
序 设计 语言 的 研发 产生 了 重大 的 推动 作用 ,如 ObjectiveC、Actor、Java 和 Ruby 等 。 同 时 ,20 世纪 90 年 代 的 许多 软件 开 
发 思想 也 得 益 于 Smalltalk, 如 Design Patterns、Extreme Programming(XP) 和 Refactoring 等 。 


心思 想 是 在 系统 开发 中 强制 性 地 使 应 用 程序 的 输入 、 处 理 和 输出 分 开 , 把 数据 、 商 业 逻 辑 和 
界面 显示 进行 分 离 , 分 别 用 模型 .控制 器 和 视图 表示 ,它们 相对 独立 而 又 能 协同 工作 ,各 自 处 
理 自 己 的 任务 ,从 而 增强 系统 的 可 维护 性 和 可 扩展 性 ,逻辑 关系 如 图 4-1 所 示 。 


用 户 
(Browser) 


视图 页 面 






| 视图 (View) 





HTML 页 面 

















控制 (Controller) 模型 (Model) 


图 4-1 Web 应 用 中 的 MVC 设计 模式 


模型 (Model) 表 示 企 业 数据 及 业务 规则 ,在 MVC 的 三 个 部 件 中 ,模型 拥有 最 多 的 处 理 
任务 ,实现 数据 操作 等 业务 逻辑 ,状态 管理 的 功能 。 被 模型 返回 的 数据 是 中 立 的 ,就 是 说 模 
型 与 数据 格式 无 关 , 这 样 一 个 模型 能 为 多 个 视图 提供 数据 。 由 于 应 用 于 模型 的 代码 只 需 写 
一 次 就 可 以 被 多 个 视图 重用 ,所 以 减少 了 代码 的 重复 性 。 

视图 (View) 是 用 户 看 到 并 与 之 交互 的 界面 ,通常 实现 数据 的 输入 (表单 页 面 ) 和 输出 
(控制 模块 返回 的 页 面 ,模型 处 理 结果 返回 页 面 、 状 态 变 化 等 ) 功 能 。 

控制 器 (Controller) 控 制 整个 业务 流程 ,实现 View 层 跟 Model 层 的 协同 工作 。 控 制 器 
接受 用 户 的 输入 并 调用 模型 和 视图 去 完成 用 户 的 需求 。 当 单 击 Web 页 面 中 的 超 链 接 和 发 
送 HTML 表单 时 ,控制 器 本 身 不 输出 任何 东西 也 不 做 任何 处 理 。 它 只 是 接收 请 求 并 决定 
调用 哪个 模型 构件 去 处 理 请 求 ,然后 确定 用 哪个 视图 来 显示 模型 处 理 返 回 的 数据 。 


4.1.3 页 面 功 能 与 内 容 设 计 


在 Web 应 用 或 Web 站 点 中 ,页 面 作 为 用 户 和 Web 的 界面 ,页 面 的 功能 就 是 内 容 展示 
和 用 户 交 互 。 因 为 一 个 Web 站 点 通常 由 大 量 的 页 面 文件 构成 ,因此 对 页 面 的 功能 划分 、 存 
储 和 组 织 应 按照 软件 系统 分 析 、 设 计 和 开发 相关 的 方法 和 模式 进行 ,包括 生命 周期 法 、 原 型 
法 和 MVC 设计 模式 等 。 
综合 利用 生命 周期 法 、 原 型 法 和 MVC 设计 模式 ,对 整个 Web 站 点 进行 系统 分 析 和 功 
能 设计 ,然后 规划 文件 夹 结 构 和 页 面 划 分 。 与 传统 的 软件 系统 开发 相 比 .Web 站 点 中 的 一 
个 页 面 ,类 似 于 传统 软件 系统 中 的 一 个 源 文件 ,只 是 页 面 之 间 的 调用 是 通过 超 链接 ,或 者 页 
面 中 包含 的 表单 的 action 属性 完成 的 ,而 不 是 传统 C 中 的 函数 调用 。 
根据 MVC 设计 模式 ,可 以 将 网 页 功能 进行 分 类 ,分 为 : @@ 用 于 内 容 展 示 、 输 入 输出 的 
页 面 (视图 ) ,通常 为 HTML 静态 页 面 ; @ 导 航 页 面 ,类 似 于 传统 程序 中 的 菜单 ,实现 页 面 之 
间 的 调用 和 导航 ,典型 的 导航 页 面 有 站 点 首页 和 菜单 网 页 和 等。 加 服务 端 脚 本 程序 页 面 ,这 类 
页 面 不 在 浏览 器 中 显示 ,主要 是 负责 数据 的 查询 ,存储 等 ,通常 为 JSP 服务 器 页 。 虽然 , 通 
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过 服务 器 页 面 可 以 简单 地 实现 MVC 模式 中 控制 器 的 功能 .但 并 不 安全 ,传统 的 方法 是 控制 
器 由 Servlet 来 完成 。 

页 面 的 功能 划分 主要 服务 于 Web 应 用 的 交互 ,提高 网 站 的 易 用 性 ,协助 用 户 顺 利 地 完 
成 期 望 的 任务 流程 。 对 于 视图 类 和 导航 类 页 面 ,还 必须 考虑 用 户 体 验 , 网 页 的 内 容 设计 要 下 
富 多 彩 , 包 括 网 站 标志 、 导 航 区 、 菜 单 区 、 表 单 样式 、 表 格 数据 文字 表现 .新 闻 、 公 告 . 讨 论 区 、 
友情 链接 、 广 告 条 、 版 权 信 息 等 。 对 网 页 内 容 的 表现 形式 ,应 根据 内 容 和 用 户 特点 ,选用 文 
本 、 图 片 动画 等 不 同 的 媒体 形式 来 展示 ,以 产生 更 好 的 用 户 体验 。 


4.1.4 页 面 布局 设计 


在 Web 应 用 中 ,网 页 是 用 户 和 互联 网 的 人 机 界面 。 在 Web 设计 中 ,网 页 布局 越 来 越 重 
要 ,只 注重 内 容 , 而 忽视 页 面 布局 的 网 页 很 难产 生 较 好 的 用 户 体验 。 实 际 情况 是 ,用 户 对 页 
面 的 体验 第 一 印象 就 是 页 面 的 栏目 和 布局 ,然后 才 是 页 面 内 容 。 只 有 当 网 页 内 容 和 网 页 布 
局 完美 地 融合 时 ,才能 产生 最 好 的 用 户 体验 。 

1. 网 页 布局 涉及 的 因素 

新 建 网 页 就 像 一 张 白 纸 , 没 有 任何 表格 \ 框 架 、 图 层 和 约定 俗 成 的 东西 。 接 下 来 ,设计 人 
员 首 先 需 要 根据 页 面 内 容 、 浏 览 用 户 等 因素 对 页 面 布局 进行 设计 。 进 行 页 面 布局 ,通常 需要 
先 在 纸 上 或 者 利用 Photoshop 等 画图 程序 来 设计 草稿 , 画 出 页 面 布局 的 草图 ,然后 再 深入 加 
工 , 最 后 定稿 。 在 进行 页 面 布局 设计 时 ,需要 考虑 以 下 几 个 因素 : 

(1) 页 面 尺 寸 。 页 面 尺 寸 和 显示 器 尺寸 ?及 显示 分 辩 率 2 紧密 相关 ,同时 浏览 器 本 身 
(如 菜单 栏 .工具 栏 等 ) 也 将 占 去 一 定 的 屏幕 空间 ,这 在 页 面 布局 设计 时 必须 考虑 。 由 于 台式 
计算 机 、 笔 记 本 ,平板 电脑 、 智 能 手机 的 显示 器 的 大 小 各 不 相同 ,在 进行 页 面 尺寸 定义 时 , 必 
须 考虑 各 种 可 能 的 显示 屏幕 情况 ,使 网 页 具有 更 好 的 自 适应 性 。 

在 早期 ,计算 机 屏幕 的 常见 显示 器 分 辨 率 为 1024X768, 网 页 的 设计 大 都 设计 为 1024X 
768 大 小 。 对 于 宽屏 的 情况 ,分 辩 率 可 能 为 1600X900 等 ,许多 网 页 设计 将 页 面 宽度 设计 为 
最 主流 的 1024, 遇 到 宽屏 , 则 居中 显示 。 之 所 以 要 考虑 屏幕 的 显示 分 辩 率 ,因为 在 涉及 网 页 
中 的 图 片 时 ,必须 要 指定 图 片 大 小 3, 即 图 片 长 宽 方 向 的 像素 数量 。 

(2) 整体 造型 。 指 页 面 的 整体 形象 ,虽然 显示 器 和 浏览 器 都 是 矩形 ,但 对 于 页 面 的 造 
型 ,可 以 根据 网 站 的 性 质 , 充 分 运用 自然 界 中 的 各 种 形状 以 及 它们 的 组 合 ,例如 : 矩形 , 圆 
形 , 三 角形 以 及 不 规则 边界 的 图 形 等 。 

不 同 的 形状 所 代表 的 意义 是 不 同 的 。 例 如 : 矩形 代表 着 正式 规则 ,大 多 数 政府 网 页 都 
是 以 矩形 为 整体 造型 ; 圆 形 代表 着 柔和 ,团结 温暖、 安全 等 ,许多 时 尚 站 点 喜欢 以 圆 形 为 页 
面 整体 造型 ; 三 角形 代表 着 力量 、 权 威 等 ,许多 大 型 的 商业 站 点 为 显示 它 的 权威 性 常 以 三 角 





@ 显示 器 尺寸 ,显示 器 一 般 有 CRT 显示 器 和 LCD 显示 器 两 种 ,显示 器 尺寸 是 指 屏幕 对 角 线 的 长 度 , 单 位 为 英寸 (1 
英寸 =2.54cm) 。 常 见 的 有 12 英寸 .14 英寸 .15 英寸 .17 英寸 .19 英寸 .22 英寸 等 。 

四 显示 分 辩 率 (resolution) ,显示 分 辩 率 又 称 屏幕 分 辩 率 ,是 屏幕 图 像 的 精密 度 ,是 指 显 示 器 所 能 显示 的 水 平和 垂 
直方 向 的 像素 数 。 通 常情 况 下 ,同一 个 显示 器 ,可 设置 多 种 不 同 的 显示 分 辩 率 。 

@ 图 片 大 小 , 指 图 片 水 平和 垂直 方向 的 像素 数 。 同 一 张 图 片 ,在 不 同 的 显示 器 分 辩 率 下 显示 的 大 小 不 同 。 图 像 分 
辨 率 是 指 单位 英寸 中 所 包含 的 像素 点 数 , 常 用 的 图 像 分 辩 率 单位 有 : ppi( 像 素 每 英寸 ) 和 dpi( 点 每 英寸 )。 在 显示 器 中 ， 
一 般 用 像素 ,在 打印 机 或 出 版 印刷 中 用 点 来 描述 。 





形 为 页 面 整体 造型 ; 大 部 分 的 游戏 场景 则 使 用 不 规则 的 图 形 。 
(3) 页 头 。 页 头 又 称 为 页 眉 ,页 头 常 放置 站 点 的 名 字 、 公 司 标志 或 旗帜 广告 。 页 头 的 内 
容 和 设计 风格 直接 影响 到 整个 页 面 的 协调 性 。 对 于 站 点 首页 ,为 了 有 效 利用 屏幕 空间 ,许多 
网 站 的 页 头 中 ,除了 放置 公司 标志 ,往往 在 页 头 右 侧 放 置 登录 按钮 ` 超 链接 等 。 

在 页 头 下 方 , 可 以 是 一 行 滚动 新 闻 ,或 者 是 水 平方 向 的 导航 菜单 ,或 者 是 一 个 动画 效果 ， 
将 页 头 和 下 面 的 内 容 进 行 分 开 , 从 而 产生 较 好 的 视觉 效果 。 大 多 数 门户 网 站 首页 都 采用 了 
上 述 的 页 头 设计 ,例如 sina,163 的 首页 页 头 。 

(4) 页 脚 。 页 脚 和 页 头 相 呼应 ,页 头 放 置 站 点 主题 ,页 脚 则 放置 制作 者 、 公 司 信息 、 联 系 
人 信息 以 及 网 站 版 权 信息 等 。 

(5) 菜单 。 与 传统 的 程序 类 似 , 在 网 页 上 也 通常 组 织 菜单 ,菜单 其 实 都 是 超 链接 ,菜单 
超 链 接 通 常 组 织 成 水 平 下 拉 式 菜单 或 树 状 目录 结构 形式 。 菜单 的 组 织 形式 与 网 站 用 户 以 及 
菜单 数量 的 多 少 有 关 ,普通 用 户 通常 组 织 成 水 平 下 拉 式 菜单 ,在 页 头 的 下 方 。 管 理 员 用 户 或 
菜单 数量 众多 的 时 候 , 菜 单 通常 组 织 成 树 状 结构 , 放 在 页 面 的 左 侧 。 

(6) 超 链 接 。 在 具有 导航 功能 的 页 面 中 ,包含 了 大 量 的 超 链接 ,以 链接 到 其 他 页 面 。 可 
以 按照 链接 的 内 容 , 将 超 链 接 组 织 成 不 同 的 超 链 接 区 。 例 如 ,许多 门户 网 站 的 各 种 板块 栏 
目 , 就 是 一 个 个 的 超 链 接 区 。 超 链接 可 以 单独 出 现 , 也 可 以 组 织 成 多 行 多 列 的 超 链接 区 ,还 
可 以 组 织 成 横向 菜单 条 ,或 者 纵向 的 超 链接 区 。 

2. 常见 网 页 布局 

在 第 3 章 介 绍 网 页 自 适应 时 ,我 们 从 技术 的 角度 ,根据 显示 器 大 小 和 分 辨 率 大 小 设置 的 
不 同 ,介绍 了 页 面 布局 的 问题 。 在 这 里 ,我 们 从 功能 的 角度 ,介绍 页 面 布局 ,就 是 对 页 面 空 间 
的 分 割 和 安排 ,以 便 组 织 网 页 内 容 。 在 数 以 亿 计 的 Web 页 面 中 ,网 页 的 布局 可 谓 千差万别 。 
由 于 网 页 的 功能 不 同 , 表 达 的 内 容 不 同 ,人 们 的 审美 情趣 不 同 ,因此 ,我 们 不 可 能 要 求 设计 人 
员 设 计 统 一 的 网 页 布局 。 虽然 如 此 ,根据 页 面 的 功能 不 同 , 许 多 页 面 在 布局 上 是 相似 的 。 例 
如 ,站 点 首页 设计 ,菜单 设计 ,导航 设计 ,内 容 页 面 设计 等 。 

常见 的 页 面 布局 有 : 

(1) 基于 栏目 的 页 面 布局 。 对 于 内 容 很 多 的 网 页 ,通常 将 页 面 按 照 栏目 进行 组 织 ,组 织 
成 多 个 矩形 区 域 (内 容 板块 ) ,每 个 区 域 包含 一 组 超 链接 ,形成 一 个 超 链接 区 。 超 链接 区 通常 
包含 一 个 栏目 标题 ,栏目 之 间 通 过 色彩 块 来 区 分 。 为 了 增加 视觉 效果 ,在 栏目 之 间 ,或 矩形 
块 栏目 内 部 ,通常 插入 一 些 动画 广告 

基于 栏目 的 页 面 布局 主要 用 于 导航 页 面 设计 ,大 部 分 的 门户 网 站 首页 ,或 者 是 内 容 众多 
的 网 页 ,常常 采用 基于 栏目 的 页 面 布局 形式 ,例如 ,sina,163,265 上 网 导航 等 。 网 页 布局 示 
例如 图 4-2 所 示 。 

基于 栏目 的 页 面 布局 主要 应 用 于 一 些 商 业 网 站 的 首页 。 为 吸引 用 户 , 增 加 用 户 访问 量 ， 
从 商业 运营 的 目的 出 发 ,网 站 的 内 容 很 多 ,分 成 了 不 同 的 超 链接 区 域 ( 板 块 ) 。 为 节省 屏幕 空 
间 ,在 栏目 内 往往 还 使 用 标签 选项 卡 ,以 组 织 更 多 的 内 容 。 

(2) 整 幅 效果 型 布局 。 对 于 页 面 内 容 较 少 的 网 站 ,特别 是 一 些 专用 的 Web 应 用 系统 ， 
在 首页 设计 时 ,没有 特别 多 的 内 容 显 示 。 此 时 ,通常 将 首页 设计 成 一 个 登录 界面 ,采用 一 个 
大 幅 图 片 或 动画 ,包含 用 户 账户 登录 表单 ,方便 用 户 登录 ,示例 页 面 如 图 4-3 所 示 。 

整 幅 效果 型 布局 的 特点 是 页 面 简洁 美观 .具有 一 些 简单 的 功能 ,如 通知 公告 .留言 也 可 
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图 4-3 整 幅 效果 型 布局 网 站 首页 示例 














以 在 页 面 中 体现 ,以 增强 页 面 的 功能 。 现 在 ,对 于 内 容 较 少 的 页 面 , 通 过 HTML 十 CSS3 进 
行 网 格 化 布局 的 设计 更 加 流行 ,其 展示 的 内 容 也 更 加 丰富 ,首页 示例 如 图 4-4 所 示 














图 4-4 网 站 首页 布局 示例 


在 首页 显示 水 平 菜单 和 登录 接口 ,体现 系统 功能 ,通过 大 幅 图 片 绕 开 了 页 面 内 容 少 而 难 
于 布局 的 问题 。 
(3) 网 页 enga 所 谓 ” 是 指 将 页 面 分 成 上 .中 .下 三 个 部 分 ， 


pe 串 为 横 条 网 站 标志 十 广告 条 ,页 面 底部 是 版 权 等 信息 ,中 间 为 主要 内 容 ， ee 右 
个 部 分 ,左面 为 菜单 区 ， i 显示 内 容 的 页 面 ,示例 如 图 4-5 所 示 
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图 4-5 “ 工 ? 形 页 面 布 局 示例 
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“ 工 ” 形 页 面 布局 是 网 页 设计 中 用 得 最 广泛 的 一 种 布局 方式 ,这 种 布局 的 优点 是 左 侧 菜 
单 采用 树 状 结构 ,逻辑 结构 清晰 :菜单 项 组 织 数量 多 。 缺 点 是 规矩 呆板 ,如 果 细 节 和 色彩 上 
搭配 不 好 ,很 难 给 人 留 下 印象 ,不 适宜 做 前 卫 的 和 个 性 化 强 的 站 点 。 

(4) 自 顶 向 下 层次 结构 布局 。 对 于 一 般 的 内 容 页 面 ,通常 将 页 面 自 顶 向 下 分 成 几 个 平 
行 的 区 域 ,顶部 是 页 头 , 接 下 来 的 区 域 分 别 放置 超 链 接 块 、 分 享 按钮 .评论 等 ,最 下 面 的 区 域 
显示 具体 的 文章 正文 内 容 。 一 些 文章 页 面 或 注册 页 面 等 经 常 采用 这 种 类 型 的 页 面 布局 , 示 
例 网 页 如 图 4-6 所 示 。 
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图 4-6 自 顶 向 下 层次 结构 布局 示例 


自 顶 向 下 组 织 网 页 内 容 , 由 于 现在 的 大 多 数 显 示 器 为 宽屏 ,页 面 通常 采用 多 栏 布局 。 例 
如 ,在 内 容 区 右 侧 设置 侧 边 条 (sidebar) .放置 广告 推荐、 排名 等 超 链接 。 商 业 网 站 通常 会 
在 页 面 上 安排 商业 广告 ,采用 多 栏 布局 。 其 他 内 容 的 设置 则 与 网 页 内 容 相关 ,例如 ,如 果 是 
新 闻 页 面 , 则 会 有 评论 ,分享 等 按钮 。 

(5) 自由 式 结构 布局 。 上 述 的 结构 布局 可 称 作 ”传统 型 页面 布局 ,还 有 一 些 页 面 结 构 
布局 打破 了 传统 的 页 头 、 页 尾 、 菜 单 . 栏 目 . 超 链接 区 域 等 布局 模式 ,把 页 面 设计 成 一 张 极 具 
创意 的 广告 作品 。 这 种 页 面 的 结构 布局 通常 用 精美 的 图 片 、 网 站 标识 性 图 案 (Logo) 或 变形 
的 艺术 化 文字 作为 设计 中 心 进行 主体 构图 。 菜单 .栏目 条 等 则 按 次 要 元 素 处 理 , 自 由 地 安排 
在 页 面 上 ,起 到 点 级、 修饰 .均衡 页 面 的 效果 。 

自由 式 结 构 布 局 的 优点 是 页 面 靓 丽 、 现 代 、 轻 松 、 节 奏 明 快 ,很 容易 让 访问 者 驻足 欣赏 。 
缺点 是 下 载 速 度 缓慢 ,文字 信息 量 少 , 信 息 的 逻辑 表达 能 力 弱 .浏览 者 不 易 直 奔 主题 ,信息 查 
找 麻 烦 。 自 由 式 结构 布 局 一 般 用 在 时 尚 类 站 点 上 :如 时 装 、 化 妆 品 等 以 崇尚 现代 、 美 感 为 主 
题 的 站 点 ,专业 性 的 商务 站 点 不 宜 采 用 。 

页 面 布 局 设计 是 一 项 复杂 的 创意 工作 ,在 进行 页 面 布局 设计 时 ,需要 根据 网 站 的 性 质 











(例如 政府 网 站 ,企业 或 机 构 应 用 平台 、 专 业 性 商务 站 点 .前卫 现代 时 尚 类 站 点 等 ) 页 面 的 功 
能 、 是 否 首 页 、 页 面 内 容 的 多 少 , 以 及 不 同 的 用 户 角色 进行 精心 策划 ,才能 设计 出 功能 性 和 视 
觉 效 果 好 的 页 面 。 此 外 ,还 需要 考虑 网 页 的 自 适应 .选取 大 小 合适 的 图 片 , 以 便 适应 用 户 的 
电脑 屏幕 .笔记 本 屏幕 以 及 智能 手机 等 不 同 的 网 页 浏览 。 


4.1.5 页 面 视觉 设计 


视觉 设计 是 指 利用 视觉 符号 来 传递 各 种 信息 的 设计 ,其 应 用 的 范畴 很 广 , 可 以 包括 工业 
产品 设计 ,广告 设计 ,新 媒体 设计 ,服饰 设计 等 。 在 Web 中 , 则 有 网 页 的 视觉 设计 。 在 网 页 
中 ,视觉 设计 和 功能 性 设计 不 同 , 它 没有 功能 性 要 求 , 没 有 太 多 的 理论 约束 ,更 多 的 是 体现 出 
感性 和 个 性 元 素 ,服务 于 人 的 审美 情趣 。 我们 可 以 把 页 面 视觉 设计 分 成 色彩 、 图 形 和 字体 几 
个 方面 。 

在 页 面 的 视觉 效果 的 诸多 影响 因素 中 ,色彩 设计 产生 的 视觉 效果 最 直接 .最 明显 ,不 同 
性 质 和 功能 的 网 站 ,其 颜色 的 主 色调 设计 也 不 相同 。 大 部 分 网 站 都 追求 一 种 明快 的 颜色 设 
计 , 例 如 绿色 ,深蓝 、 栖 色 和 粉红 色 ,这 些 颜色 都 十 分 抢眼 。 其 次 是 颜色 的 搭配 ,浓重 的 主 色 
调 表 明了 幽默 的 态度 ,也 有 助 于 人 们 迅速 注意 到 页 面 上 的 重要 元 素 。 关 于 常用 颜色 的 RGB 
色 值 ,可 以 利用 百度 搜索 Web 标准 颜色 9 获得 。 

关于 图 形 的 应 用 ,现在 许多 Web 2. 0 站 点 的 页 面 都 避免 使 用 照片 ,大 都 选择 简洁 的 图 
形 符号 。 可 以 将 图 形 的 应 用 分 为 两 个 方面 : 用 于 信息 反馈 ,信息 反馈 一 般 有 以 下 5 种 情 
况 : 成 功 .、 失 败 、 询 问 、 警 告 错误/ 异常 ,用 于 视觉 辅助 的 图 形 必须 表达 每 种 情况 的 准确 含 
义 。 回 增加 趣味 性 ,为 了 增加 趣味 性 ,通常 用 图 形 来 表现 一 种 状态 ,例如 ,表现 喜 怒 哀乐 的 简 
单 图 形 。 当 使 用 图 形 时 ,图 形 的 设计 一 定 要 注意 它 的 准确 性 ,和 否则 会 起 到 相反 的 效果 。 例 
如 ,用 一 个 惊讶 的 表情 来 表示 警告 ,但 往往 被 误 以 为 是 询问 或 者 出 现 了 异常 。 关 于 图 形 符 
号 ,除了 日 常 的 积累 外 ,互联 网 中 有 许多 分 享 图 形 符号 的 网 站 ,例如 Font Awesome 站 点 2。 

对 于 文字 的 字体 ,更 多 地 应 选择 大 号 字 。 另 外 ,要 注意 发 挥 空白 的 作用 ,巧妙 利用 空白 
可 以 提高 页 面 的 易 读 性 和 易 用 性 。 空 白 可 以 分 离 出 重要 信息 ,使 眼睛 得 到 休息 ,并 给 人 以 冷 
静 和 有 秩序 的 感觉 。 

此 外 ,从 总 体 上 来 讲 ,页面 视觉 设计 还 需要 遵循 几 个 一 般 性 原则 ,包括 : @ 平 衡 , 避 免 一 
边 倒 、 头 重 脚 轻 , 可 以 是 均衡 对 称 ,也 可 以 是 不 均衡 对 称 ; @ 重 点 突出 .有 且 只 有 一 个 视觉 趣 
味 中 心 (Center of Visual Interest,CVD ,可 以 通过 对 位 置 、 对 比 和 比例 的 处 理 来 实现 ; @ 简 
化 原则 ,去 除 或 尽量 弱化 干扰 ,突出 一 点 ; @ 重 复原 则 ,通过 合理 重复 ,形成 一 个 视觉 模式 ; 
回 统 一 一 致 ,保持 风格 的 一 致 性 ; @ 便 利 性 ,可 读 性 与 易 辨 认 , 便 于 浏览 者 阅读 。 

最 后 简单 地 总 结 如 下 : 功能 性 设计 通常 是 一 种 交互 设计 ,其 主要 目标 是 提高 系统 的 易 
用 性 ; 视觉 设计 的 主要 目标 不 是 功能 性 的 ,而 是 改善 人 们 的 视觉 感受 。 视觉 设 计 是 一 项 复 
杂 的 艺术 创造 ,需要 很 深厚 的 艺术 文化 积淀 。 虽 然 人 们 不 断 推崇 务实 的 简约 设计 概念 ,但 是 





Q@ ”Web 标准 颜色 是 由 W3C 组 织 定 义 的 ,可 以 直接 以 英文 名 称 形式 在 网 页 脚本 中 使 用 的 一 组 RGB 颜色 。Web 标 
准 色 共计 140 种 ,其 中 Aqua 与 Cyan 异 名 同色 (青色 ) ,Fuchsia 与 Magenta 异 名 同色 (洋红 ), 所 以 实际 上 共有 138 种 。 
Web 标准 颜色 是 命名 颜色 的 一 个 子 集 。 

加 ”网址 : http://fontawesome. dashgame. com/ ,提供 了 一 套 丰富 的 矢量 图 标 字体 库 和 CSS 框架 ,用 户 无 须 依赖 
JavaScript, 可 以 使 用 CSS 所 提供 的 所 有 特性 对 它们 进行 更 改 , 包 括 大 小 、 颜 色 、 阴 影 或 者 其 他 效果 。 
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另类 的 创新 艺术 表现 也 不 时 地 出 现在 各 种 时 尚 和 前 卫 的 网 站 中 。 
4.1.6 页 面 效果 设计 


当 网 页 的 整体 布局 确定 后 , 接 下 来 就 是 效果 设计 了 。 效 果 设 计 就 是 利用 Photoshop 等 
图 形 图 像 处 理工 具 ,按照 页 面 的 布局 设计 ,来 设计 并 制作 页 面 的 效果 图 。 然 后 对 图 片 进行 切 
图 ,为 后 续 的 页 面 HTML 代码 编写 准备 图 片 素材 。 

当 页 面 设计 效果 图 制作 完成 后 , 接 下 来 就 是 切 图 。 将 效果 图 中 的 元 素 剪 切 为 一 个 个 小 
的 图 片 ,以 保证 网 页 的 浏览 速度 。 首 先 要 分 析 页 面 效 果 图 , 它 是 未 来 网 页 的 显示 效果 。 对 于 
上 述 的 页 面 效果 图 , 切 图 时 应 从 以 下 几 个 方面 考虑 : 

(1) 对 于 一 些 用 于 背景 色 的 背景 图 片 ,往往 是 一 种 颜色 渐变 ,因此 ,我 们 可 以 切 一 个 宽 
度 或 高 度 为 1 个 像素 的 小 图 片 ,在 页 面 HTML 代码 中 ,利用 该 图 片 实现 Table 单元 格 中 的 
背景 横向 或 纵向 填充 ,以 达到 效果 图 的 显示 效果 。 

(2) 对 于 页 面 主体 中 的 一 些 栏 目标 题 ,可 以 直接 切 为 小 图 片 ,图 片 大 小 需要 考虑 页 面 尺 
寸 和 网 页 的 自 适应 需要 。 

其 他 的 页 面 元 素 操作 类 似 。 最 后 将 这 些 切 图 后 的 小 图 片 存储 到 一 个 特定 的 images 文 
件 夹 中 , 它 是 后 续 进 行 HTML 页 面 设计 的 图 片 素材 。 

在 页 面 效 果 设计 中 ,还 涉及 了 其 中 的 文字 ,对 于 文字 内 容 , 可 以 通过 CSS 样式 表 技 术 ， 
来 定义 文字 样式 。 如 果 布 局 采用 Table, 表 格 属性 要 定义 CSS, 从 而 实现 页 面 布局 和 显示 样 
式 的 分 离 ,增加 页 面 的 可 维护 性 。 





4.2 Web 开发 工具 


在 软件 系统 开发 或 网 页 制作 中 ,编写 代码 基本 上 有 两 种 方式 , 即 手工 编写 代码 和 利用 集 
成 开发 环境 编写 代码 。 很 多 情况 下 ,一 些 熟练 的 开发 人 员 会 选择 一 款 高 效 的 文本 编辑 器 采 
用 手工 编写 代码 ,因为 对 代码 非常 熟悉 ,手工 编写 不 需要 安装 复杂 环境 ,简单 省 事 。 对 初学 
者 ,手工 编写 代码 是 困难 的 ,效率 很 低 ,需要 借助 于 特定 的 软件 开发 工具 或 集成 开发 环境 。 

集成 开发 环境 (Integrated Development Environment,IDE) 一 般 包 括 代 码 编辑 器 、 编 译 
器 .调试 器 和 图 形 用 户 界面 工具 。 同 时 ,许多 IDE 还 有 所 见 即 所 得 的 设计 功能 ,用 户 可 以 利 
用 图 形 界面 操作 ,自动 生成 相应 功能 的 程序 代码 或 HTML 代码 。IDE 中 的 设计 视图 或 代 
码 生 成 器 可 以 简化 代码 的 编写 工作 ,提高 编程 效率 ,但 产生 的 代码 元 余 度 大 ,可 手工 调整 。 


4.2.1 SublimeText 代码 编辑 器 


理论 上 讲 ,任何 纯 文本 编辑 器 都 可 以 用 作 编 写 代码 的 工具 ,例如 ,Windows“ 记 事 本 ” 程 
序 。 但 是 ,这 样 的 编辑 器 没有 代码 的 拼写 检查 .语法 着 色 等 程序 文件 特定 的 功能 ,编辑 功能 
也 有 限 ,效率 很 低 , 不 适合 用 作 代 码 编辑 。 

2008 年 1 月 ,程序 员 Jon Skinner 推出 了 一 个 专用 于 程序 编码 的 代码 编辑 器 , 即 
Sublime Text。SublimeText 不 仅仅 是 一 个 代码 编辑 器 , 它 的 设计 目的 是 一 个 框架 ,内 藤 
Python 解释 器 支持 插件 开发 ,通过 安装 插件 ,可 以 支持 一 个 新 的 程序 编辑 ,使 得 该 工具 具有 
强大 的 开放 性 。 为 方便 使 用 ,Sublime 安装 了 一 组 标准 插件 ,支持 HTML、 CSS、XML、 


JavaScript 等 流行 的 前 端 开 发 语言 。Sublime Text 支持 编程 语言 语法 高 亮 , 拥 有 代码 自动 
完成 功能 ,支持 多 行 同时 编辑 , 在 界面 上 支持 多 页 标签 和 代码 缩 略 图 (minimap) 等 强大 
功能 。 

SublimeText 是 一 个 跨 平 台 的 编辑 器 ,同时 支持 Windows、Linux、Mac OS X 等 操作 系 
统 。 我 们 以 Windows 版 为 例 简 要 介绍 SublimeText 代码 编辑 的 应 用 。SublimeText 为 免 
费 软件 ,首先 从 网 上 搜索 并 下 载 该 软件 的 中 文 版 ,进行 安装 ,安装 后 运行 该 程序 ,如 图 4-7 
所 示 。 
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图 4-7 SublimeText 主 窗口 


下 面 介绍 SublimeText 的 基本 应 用 。 

首先 打开 “查看 ”菜单 ,选择 “语法 ”级 联 菜 单 , 按 字 母 顺 序列 出 了 SunlimeText 支持 的 语 
言 ,包括 CC++、CSS、HTML ,Java JavaScript 等 众多 语言 。 选 择 HTML ,以 HTML 代码 
编辑 为 例 , 介 绍 SublimeText 的 编辑 功能 。 

1. 打开 文件 夹 或 文件 

在 “文件 ”菜单 中 ,执行 “打开 文件 …” 或 “打开 文件 夹 …” 菜 单 命令 ,将 打开 一 个 文件 ,或 
打开 一 个 文件 夹 , 打 开 文 件 夹 将 在 Sublime 窗口 左 侧 边栏 显示 文件 夹 目录 结构 ,便于 多 文件 
编辑 。 打 开 文 件 夹 示 例如 图 4-8 所 示 。 

2. GoAnything 

在 一 个 大 型 工程 中 ,文件 众多 ,查找 文件 比较 麻烦 ,在 SublimeText 中 ,在 “查找 ”菜单 中 
包含 了 GoAnything 菜单 命令 (Ctrl 十 P) 。 执 行 该 命令 ,打开 文件 列表 窗口 ,在 窗口 的 第 一 
行 是 一 个 输入 框 , 可 以 输入 要 找 的 文件 名 ,实现 文件 的 快速 查找 和 切换 。 

GoAnything 功能 非常 强大 ,文件 查找 支持 模糊 匹配 ,用 户 输入 的 文件 名 不 一 定 是 精确 
的 ,系统 同样 可 以 筛选 出 文件 名 中 包含 用 户 输入 的 可 能 的 文件 。 如 果 在 输入 中 包含 文件 夹 ， 
则 查找 的 文件 将 更 加 准确 ,例如 : modeldemo/useraccount. jsp ,将 查找 modeldemo 文件 夹 
中 的 useraccount.jsp 文件 ,其 他 同名 文件 不 会 查找 。 文 件 查找 功能 使 得 用 户 对 大 型 工程 中 
的 文件 查找 和 切换 带 来 很 大 方便 。 
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图 4-8 打开 文件 夹 /文件 


3. 命令 面板 

代码 编辑 有 种 说 法 就 是 多 用 键盘 , 少 用 鼠标 ,这 就 需要 记 住 大 量 的 快捷 键 。 记 忆 快 捷 键 
需要 一 个 过 程 ,SublimeText 提供 了 命令 面板 功能 ,只 要 按 组 合 键 Ctrl 二 Shift 十 P 即 可 打开 
证 令 面 板 。 在 命令 面板 中 ,可 以 看 到 所 有 的 命令 列表 ,也 可 以 在 输入 框 中 ,通过 输入 查找 需 
要 的 操作 命令 。 例 如 ,输入 reindent, 查 找 重新 缩 进 命令 ,找到 后 , 按 回 车 键 ,文档 将 按照 默 
认 的 缩 进 方 式 重新 缩 进 。 按 Esc 键 退出 命令 面板 。 

4. 多 点 编辑 

多 点 编辑 就 是 在 多 处 设置 插入 点 ,同时 在 多 处 进行 的 编辑 。 进 入 多 点 编辑 的 方式 很 多 ， 
常用 的 有 : 





(1) 按 住 Ctrl 键 ,依次 单 击 鼠 标 左 键 ,可 定义 多 个 插入 点 , 即 可 实现 多 处 同时 编辑 操作 。 

(2) 按 住 Shift 键 , 按 住 鼠 标 右键 上 下 左右 拖 动 光标 ,可 以 得 到 一 条 垂直 的 多 行 插入 点 ， 
同时 进行 多 行 编辑 。 

(3) 选择 多 行 后 , 按 Ctrl 十 Shift 二 L 组 合 键 ,在 每 行 的 行 尾 增加 插入 点 。 


(4) 当 执 行 查找 操作 时 ,连续 按 Ctrl 十 D 组 合 键 选择 多 处 ,也 进入 多 点 编辑 状态 。 例 
如 , 按 Backspace 键 ,再 输入 新 的 内 容 , 可 实现 多 处 同时 替换 操作 。 

在 多 点 编辑 模式 ,输入 空格 ,可 以 实现 多 行 多 处 同时 插入 空格 。 或 者 按 回 车 键 ,实现 在 
多 处 后 面 同时 插入 空 行 操作 。 多 点 编辑 是 SublimeText 非常 优秀 的 功能 , 它 可 以 极 大 地 提 
高 用 户 的 代码 编辑 效率 。 

5. 选择 

在 一 个 单词 上 双击 , 则 所 有 相同 的 字符 串 被 框 出 , 按 Ctrl 十 D 组 合 键 将 依次 选择 下 一 个 
框 选 的 字符 串 ,并 进入 多 点 编辑 状态 。 

如 果 要 执行 查找 替换 操作 ,通过 按 Ctrl 十 D 组 合 键 ,不 断 选择 框 出 的 文本 ,如 果 要 跳 过 











某 处 , 按 Ctrl+TK 组 合 键 , 同 时 进入 多 点 编辑 模式 , 按 Backspace 键 删除 选中 的 文字 ,然后 输 
入 新 的 文字 , 即 实现 了 查找 替换 操作 。 

6. 查找 蔡 换 

查找 替换 是 所 有 文字 编辑 软件 的 基本 功能 。 字 符 串 查找 命令 主要 集中 在 “查找 ? 莱 单 
中 , 按 快 捷 键 Ctrl 十 F ,在 窗口 底部 显示 查找 工具 条 , 单 击 Find All, 则 选中 所 有 ,并 进入 多 点 
编辑 状态 。 快 捷 键 Ctrl 二 H 的 作用 为 查找 替换 功能 。 

如 果 在 多 个 文件 中 进行 查找 操作 ,在 左 侧 边 的 文件 夹 目 录 树 中 ,在 文件 夹 节点 上 右 击 ， 
执行 “查找 /替换 …” 命 令 。 

7. 代码 补 齐 

代码 补 齐 就 是 根据 语法 , 当 用 户 只 输入 一 部 分 ,系统 会 自动 补 齐 成 一 个 完整 的 代码 片 
段 。 例 如 , 按 Shift 十 Ctrl 十 P 组 合 键 ,打开 命令 面板 ,输入 HTML ,找到 Set Syntax: HTML 
命令 , 按 回 车 键 ,进入 HTML 代码 编辑 状态 。 此 时 ,HTML 标签 有 着 色 和 高 亮 显示 。 

输入 HTML ,然后 按 Tab 键 , 则 系统 自动 生成 一 个 HTML 代码 框架 , 即 常用 的 代码 片 
段 。 在 输入 代码 的 过 程 中 ,输入 代码 的 前 面部 分 ,输入 Tab, 则 进行 代码 补 齐 , 比 如 : 输入 
link , 按 Tab 键 , 则 补 齐 为 : 


<link rel = "stylesheet" type = "text/css" href = ""> 
上 述 用 于 输入 的 能 进行 代码 补 齐 的 词 称 为 触发 词 ,其 补 齐 的 代码 片段 是 通过 Emmet 包 
定义 的 ,高 级 用 户 可 以 定义 自己 的 补 齐 代 码 包 。 
8. SublimeText 常用 快捷 键 列表 
在 文本 编辑 中 ,菜单 命令 和 命令 按钮 的 效率 很 低 ,最 好 的 方法 是 使 用 快捷 键 。 
SublimeText 常用 快捷 键 见 表 4-1。 
表 4-1 SublimeText 常用 快捷 键 列表 

















快 捷 键 功 能 
Ctrl+L 选择 当前 行 , 重 复 可 选择 下 一 行 
Shift 十 个 或 向 上 选中 多 行 ,或 向 下 选中 多 行 
Ctrl 十 Shift 十 工 选择 多 行 后 ,再 按 Ctrl 十 Shift 十 ,会 在 每 行 行 尾 插 入 光标 , 即 可 同时 编辑 这 些 行 
Ctrl 十 又 删除 当前 行 , 同 Ctrl 十 Shift 十 K 
Ctrl+K+K 从 光标 处 开始 删除 代码 至 行 尾 





Ctrl 十 Shift+D 快速 复制 光标 所 在 的 一 整 行 ,并 插入 到 该 行 前 面 
Ctrl 十 Shift 十 个 或 | 在 一 行 的 任意 位 置 , 按 Ctrl 十 Shift 十 和 /vy 组合 键 可 以 实现 当前 行 的 上 下 移动 

















Ctrl 十 Enter 在 当前 行 后 插入 一 空 行 , 按 Ctrl 十 Shift 十 Enter 组 合 键 ,在 当前 行 前 插入 一 空 行 
合并 选中 的 多 行 代码 为 一 行 ,例如 : 将 多 行 格式 的 CSS 属性 合并 为 一 行 。 在 一 

Ctrl 十 行 的 任意 位 置 , 按 Ctrl 十 ] 组 合 键 ,下 一 行 和 本 行 合 并 ,连续 按 Ctrl 十 ] 组 合 键 也 
可 实现 多 行 的 合并 

Shift 十 一 /一 连续 向 右 或 向 左 选 择 文本 





双击 ,选择 一 个 单词 ,其 他 相同 的 单词 被 框 选 。 按 快捷 键 Ctrl+D 选择 下 一 个 单 
词 ,重复 可 选择 下 一 个 相同 的 单词 
选择 括号 内 的 内 容 (继续 选择 父 括号 ) 。 例 如 : 快速 选中 删除 函数 中 的 代码 , 重 
写 函 数 体 代 码 或 重 写 括号 内 的 内 容 


Ctrl 十 D 








Ctrl 十 Shift 二 M 
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续 表 
快 捷 键 功 能 

Ctrl 十 A 全 选 

Ctrl 十 / 注释 当前 行 ,或 将 选中 的 文本 变 为 注释 ,或 取消 注释 

Ctrl 十 Shift 十 / 注释 多 行 

Ctrl 十 F 打开 底部 搜索 框 ,在 当前 文件 内 查找 关键 字 

i 在 文件 夹 内 查找 ,与 普通 编辑 器 不 同 的 地 方 是 Sublime 允许 添加 多 个 文件 夹 进 
行 查找 
打开 搜索 框 ,用 法 : 输入 文件 名 ,快速 搜索 文件 ;加 输入 “: ”和 数字 , 跳 转 到 文 

Ctrl 十 P 件 中 该 行 代码 ( 同 Ctrl 十 G); @ 输 入 @ 和 关键 字 , 查 找 文件 中 函数 名 ( 同 Ctrl 十 
R); 轩 输 入 # 和 关键 字 , 查 找 变量 名 ( 同 Ctrl 十 :) 

Ctrl 十 H 查找 / 蔡 换 

re 打开 命令 面板 ,输入 关键 字 , 调 用 Sublime 或 插件 的 功能 。 例 如 : 输入 HTML， 
快速 选择 要 编辑 文件 的 类 型 

Ctil 十 /一 文字 放大 或 缩小 





除了 上 述 的 快捷 键 ,平时 系统 中 用 的 快捷 键 ,Sublime 也 默认 支持 ,例如 Ctrl 十 C( 复 
制 ) .Ctrl 十 V( 粘 贴 ) .Ctrl 十 Z( 撤 销 ),Ctrl+N( 新 建文 件 ) .Ctrl 十 S( 保 存 文件 ) 等 。 为 便于 记 
忆 , 可 以 将 这 些 快捷 键 分 类 ,例如 : 选择 类 编辑 类 查找 类 、 显 示 类 等 。 

在 SublimeText 中 ,系统 允许 用 户 自己 绑 定 快捷 键 ,具体 操作 大 家 可 以 逐步 练习 。 最 后 
需要 说 明 的 是 ,SublimeText 功能 非常 强大 ,社区 也 非常 活跃 ,如 果 遇 到 问题 ,很 容易 在 网 上 
找到 答案 。 许 多 优秀 编辑 器 的 快捷 键 都 与 Sublime 兼容 。 


4.2.2 网 页 制作 工具 


网 页 文件 是 一 种 纯 文本 文件 ,通过 Windows" 记 事 本 ”程序 ,SublimeText 代码 编辑 器 、 
UltraEdit 编辑 器 等 编辑 工具 可 以 编辑 网 页 文件 ,但 这 些 文本 编辑 软件 没有 可 视 化 的 网 页 设 
计 功 能 ,网 页 制作 效率 很 低 。 因 此 , 当 进 行 大 量 的 页 面 制作 时 ,可 选择 一 款 合适 的 网 页 制作 
工具 ,从 而 提高 页 面 制作 效率 。 常 用 的 页 面 制 作 工 具有 Adobe Dreamweaver 和 Microsoft 
FrontPage, 两 者 的 功能 相似 ,都 是 一 种 所 见 即 所 得 的 网 页 制作 工具 。 

1. Dreamweaver 

Dreamweaver 最 早 由 美国 Macromedia 公司 0 于 1997 年 11 月 发 布 ,是 一 款 集 网 页 制作 
和 网 站 管理 于 一 身 的 所 见 即 所 得 的 网 页 编辑 器 ,随后 又 陆续 推出 了 多 个 版 本 。2005 年 ， 
Macromedia 公司 被 Adobe 公司 8 收购 。 随 着 Adobe 公司 创意 套件 (Creative Suite,CS) 计 
划 ,2007 年 7 月 .Adobe 发 布 Dreamweaver CS3 版 本 ,Dreamweaver 进入 一 个 新 的 发 展 阶 
段 。 随 后 又 陆续 推出 了 Dreamweaver CS4(2008 年 9 月)、Dreamweaver CS5(2010 年 4 


@” ”Macromedia 成 立 于 1992 年 ,公司 位 于 美国 旧金山 ,由 MacroMind、Paracomp 和 Authorware 三 家 公司 合并 而 
成 ,致力 于 图 形 图 像 处 理 、 音 视频 和 动画 等 多 媒体 技术 在 艺术 领域 的 软件 开发 ,开发 了 号 称 网 页 三 剑客 的 Dreamweaver、 
Flash 和 Fireworks 工具 以 及 Authorware 等 著名 工具 软件 。2005 年 4 月 18 日 ,Macromedia 公司 被 Adobe 公司 收购 ,其 
后 Authorware、Freehand 等 软件 相继 停止 开发 。 

加 Adobe 公司 是 世界 著名 的 数字 媒体 供应 商 , 公 司 创建 于 1982 年 ,总 部 位 于 美国 加 利 福 尼 亚 州 圣何塞 。Adobe 是 
其 创始 人 约翰 沃 诺 克 (John E. Warnock) 老 家 中 一 条 小 河 的 名 字 (Adobe Creek) 。 


月 )、Dreamweaver CS6 (2012 年 7 月 )。2013 年 ,推出 Dreamweaver CreativeCloud, 即 
Dreamweaver CC 2013 ,当前 最 新 版 本 为 Dreamweaver CC 2018。 

一 般 情 况 下 ,软件 的 较 新 版 本 功能 更 加 强大 。 但 是 , 当 我 们 选择 一 个 开发 工具 时 ,不 是 
所 有 的 功能 我 们 都 会 用 到 ,因此 ,版 本 的 选择 也 就 不 是 越 新 越 好 。 有 时 候 是 一 个 习惯 问题 ， 
以 Dreamweaver CC 为 例 ,运行 程序 ,显示 程序 主 界面 ,如 图 4-9 所 示 。 
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图 4-9 Dreamweaver CC 2015 主 界面 


Dreamweaver 是 一 款 功能 强大 的 网 页 制作 工具 ,主要 功能 包括 : 所 见 即 所 得 设计 功能 、 
HTML 编辑 功能 以 及 网 页 预览 功能 。 在 版 本 升级 过 程 中 ,软件 的 功能 也 不 断 增加 和 增强 。 
从 Dreamweaver CS5 开始 ,增加 了 HTML 5 十 CSS3 的 支持 和 多 浏览 器 预览 支持 。 在 
Adobe Dreamweaver CC 中 ,增加 了 CSS 编辑 器 和 jQuery 库 代码 自动 完成 ,以 及 对 HTML 5 
更 加 完善 的 支持 等 ,使 得 Dreamweaver 功能 更 加 强大 。 

2. FrontPage 与 SharePoint Designer 

Microsoft FrontPage 是 微软 开发 的 一 款 网 页 制作 入 门 级 软件 ,该 软件 最 早 于 1995 年 
随 Microsoft Office 一 起 发 布 , 是 Office 套件 的 一 部 分 。 随 后 ,又 陆续 发 布 了 相关 的 升级 版 
本 ,主要 是 FrontPage 97、FrontPage 2000,FrontPage 2003。2006 年 ,微软 宣布 Microsoft 
Frontpage 停止 更 新 ,取而代之 的 是 Microsoft SharePoint Designer。 

SharePointDesigner 是 微软 新 的 网 站 创建 工具 .用 来 取代 Frontpage。 最 早 的 
SharePoint Designe 于 2009 年 3 月 发 布 .2010 年 6 月 ,微软 发 布 SharePoint Designer 2010。 
2013 年 ,发 布 SharePoint Designer 2013。 目 前 ,微软 官方 提供 SharePointDesigner 软件 的 
免费 下 载 。 

要 使 用 SharePointDesigner 程序 进行 页 面 设计 与 制作 ,还 必须 安装 微软 对 应 
的 SharePointFoundation 服务 器 ,以 实现 网 站 的 创建 ,网 页 的 制作 和 管理 。 只 安装 
SharePointDesigner 是 不 能 够 完成 网 页 制作 任务 的 。SharePointDesigne 与 SharePointFoundation 
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服务 器 结构 ,可 以 保证 小 组 开发 中 ,进行 有 效 的 版 本 的 控制 ,但 对 于 个 人 简单 的 网 页 制作 , 则 
显得 非常 麻烦 。 
运行 SharePointDesigne 程序 ,程序 主 界面 如 图 4-10 所 示 。 


Microsoft SharePoint Designer ?—- 品 Xx 
打开 SharePoint 网 站 新 建 SharePoint 网 站 
有 加 党 本 
打开 网 站 自 定义 新 建 将 子 网 站 添加 到 
的 网 站 太白 网 站 9 网 站 
最 近 访 问 过 的 网 站 网 站 模板 


要 济 洛 网 站 ,请 单 二 "打开 网 站 "。 


月 寺 四 | 工作 得 网 站 。 衬 白 网 站 


更 多 根本 








图 4-10 ”SharePointDesigne 程序 主 界面 


理论 上 讲 , 网 页 都 是 属于 一 个 网 站 的 ,因此 ,网 页 制作 的 前 提 是 先 创建 或 打开 一 个 已 经 
存在 的 网 站 。 其 实 , 网 站 就 是 一 个 Web 服务 器 上 的 文件 夹 。 有 时 候 , 我 们 如 果 仅 仅 是 做 一 
个 网 页 ,这样 的 处 理 过 于 复杂 。 但 打开 网 站 ,再 来 制作 网 页 , 当 网 站 内 的 网 页 或 图 片 的 位 置 
移动 时 ,系统 会 对 所 有 相关 的 链接 进行 重 构 ,以 保证 链接 的 正确 性 。 

最 后 需要 说 明 的 是 ,如 果 是 简单 的 HTML 文档 编写 ,建议 使 用 SublimeText 代码 编辑 
器, 在 插件 支持 下 ,可 以 支持 标记 属性 .CSS 属性 智能 提示 , 极 大 地 方便 HTML 代码 编写 。 
同时 ,SublimeText 代码 编辑 器 强大 的 编辑 功能 和 快捷 键 ,也 可 以 极 大 地 提高 编辑 效率 。 


4.2.3 MyEclipse 集成 开发 环境 


在 目前 的 Web 开发 环境 中 ,常用 的 是 Eclipse 和 MyEclipse 集成 开发 环境 。Eclipse 最 
初 是 由 IBM 公司 开发 的 替代 商业 软件 Visual Age for Java 的 下 一 代 IDE 开发 环境 ,2001 
年 11 月 贡献 给 开源 社区 ,成 为 开源 代码 免费 软件 。MyEclipse 为 商业 软件 ,是 由 Genuitec 
公司 在 Eclipse 基础 上 加 上 自己 的 插件 开发 而 成 的 功能 强大 的 企业 级 集成 开发 环境 。 

从 本 质 上 讲 ,Eclipse 和 MyEclipse 都 只 是 一 个 框架 ,允许 用 户 添加 各 种 插件 ,以 构建 特 
定 的 开发 环境 。 为 使 用 方便 ,默认 情况 下 ,它们 都 会 附带 一 个 标准 的 插件 集 以 方便 用 户 系统 
开发 ,这 些 预 装 的 插件 通常 是 Java 开发 工具 (Java Development Kit,JDK)、Tomcat 以 及 自 
带 的 大 量 框架 。 特 别 是 MyEclipse, 经 过 不 断 的 发 展 . 包 括 了 完备 的 编码 .调试 .测试 和 发 布 
功能 ,支持 HTML、JSP、CSS、 JavaScript、SQL 、Spring、Struts、Hibernate, 在 数据 库 和 
JavaEE 开发 及 应 用 程序 服务 器 整合 方面 可 以 极 大 地 提高 工作 效率 。 





1. 创建 用 户 工作 空间 (Workspace) 

在 现代 软件 集成 开发 环境 中 ,工作 空间 是 用 户 在 一 个 开发 环境 中 工作 环境 的 集合 ,通常 
为 一 个 文件 夹 , 里 面包 含 了 环境 配置 文件 ,用 户 创建 的 Project 文件 夹 等 。 在 MyEclipse 中 ， 
要 创建 项 目 , 必 须 有 一 个 工作 空间 ,默认 文件 夹 为 C:\users\workspaces\ MyEclipse2015。 
为 管理 项 目 方便 ,特别 是 项 目的 查找 和 备份 ,我 们 一 般 不 采用 默认 文件 夹 作为 自己 的 工作 空 
间 , 而 是 修改 为 一 个 盘 根 路 径 下 的 一 个 文件 夹 ,例如 D:\HaoMyeclipseWorkspaces, 这 样 便 
于 查找 和 文件 备份 。 创 建 完成 后 ,会 在 根 目 录 下 创建 两 个 文件 夹 . metadata 和 Servers, 这 是 
MyEclipse 系统 管理 用 户 工作 空间 用 到 的 ,用 户 无 须 修 改 。 

2. 新 建 项 目 (Project) 

软件 开发 的 第 一 步 是 新 建 项 目 (Project) ,一 个 Project 包含 了 系统 中 有 关 的 所 有 文件 ， 
项 目 保 存在 用 户 空间 中 。 创 建 一 个 新 的 Project 分 为 以 下 几 个 步骤 : 

(1) 打开 “文件 "菜单 ,执行 New 一 Web Project 菜单 命令 ,创建 一 个 Web 项 目 ,打开 
New Web Project 对 话 框 。 

(2) 在 New Web Project 对 话 框 中 ,输入 ProjectrName, 例 如 “HaoExampleProject”, 选 
择 默认 存储 位 置 ,在 项 目 配置 中 列 出 了 Java 版 本 。 

(3) 设置 项 目 源 文 件 和 编译 文件 输出 的 位 置 , 采 用 默认 值 不 变 。 

(4) 设置 WebModule 配置 ,包括 Context Root、Content Directory 以 及 要 生成 的 
index. jsp 和 web. xml 文件 。 

(5) 配置 Project Libraries ,添加 项 目 中 用 到 的 库 , 默 认 包括 Java EE 6 Generic 
Library,JSTL Library, 采 用 默认 值 。 
项 目 创 建 完 成 后 ,在 MyEclipse 窗口 左 侧 显示 新 建 项 目 目录 结构 ,如 图 4-11 所 示 。 
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图 4-11 MyEclipse 新 建 项 目 
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此 时 ,在 工作 空间 文件 夹 , 对 新 建 的 项 目 创 建 一 个 文件 夹 HaoExampleProject, 包 含 三 
个 子 文件 夹 ,目录 结构 如 图 4-12 所 示 。 
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图 4-12 新 建 项 目 目录 结构 


在 新 建 项 目的 物理 目录 结构 中 ,src 存放 项 目 中 的 Java 类 文件 ,通常 包含 若干 子 文件 
夹 , 对 应 不 同 的 包 , 这些 Java 类 编译 后 存储 在 WebRoot\ WEB-INF\ classes 文件 夹 中 。 
WebRoot 是 Web 项 目的 根 , 存 放 JSP 文 件 JAR 包 以 及 编译 后 的 Class 文件 等 。 通 常情 况 
下 ,还 需要 建立 子 文件 夹 , 对 文件 进行 分 类 管理 。 文 件 夹 的 创建 不 能 在 操作 系统 下 创建 , 必 
须 在 MyEclipse 中 完成 ,否则 ,MyEclipse 将 无 法 管理 新 建 的 文件 夹 。 

如 果 是 已 经 存在 的 项 目 (Project) ,可 以 通过 MyEclipse 的 File 菜单 中 的 Import 命令 导 
人 一 个 已 经 存在 的 项 目 ,项目 将 在 MyEclipse 中 打开 。 

3. 在 项 目 中 添加 源 程序 

新 建 项 目 完 成 后 ,就 可 以 在 项 目 中 添加 源 程序 等 文件 了 。 源 程序 有 Java 类 文件 和 JSP 
文件 两 种 ,Java 类 文件 保存 在 src 文件 夹 下 相应 的 包 ( 子 文件 夹 ) 中 ,JSP 文件 保存 在 
WebRoot 或 其 子 文件 夹 中 。 在 项 目 中 添加 程序 分 以 下 两 种 情况 : 

(1) 将 一 个 已 有 的 文件 添加 到 项 目 中 ,首先 复制 (Ctrl 十 C) 文 件 , 然 后 ,在 MyEclipse 左 
侧 的 树 形 目录 中 ,在 src 文件 夹 .WebRoot 或 相应 的 子 文件 夹 节点 上 单 击 , 按 Ctrl 十 V 复制 
文件 到 相应 文件 夹 中 。 

将 一 个 Java 文件 复制 到 当前 项 目 , 可 能 会 因为 原 有 文件 的 包 定 义 等 原因 ,导致 在 新 的 
位 置 出 现 错误 ,在 文件 和 文件 夹 名 的 左下 角 显 示 橙 色 “!” 或 红色 “X”。 双 击 该 文件 ,在 文件 
编辑 窗口 ,用 鼠标 指向 错误 行 首 的 杰 色 "1” 或 红色 “X”, 显 示 错 误 信息 。 

(2) 在 项 目 中 新 建文 件 ,在 左 侧 窗 口 项 目 树 状 目录 的 src 或 WebRoot 节点 上 右 击 ,打开 
快捷 菜单 ,指向 New 级 联 菜单 ,显示 可 以 在 WebProject 项 目 中 添加 的 文件 类 型 ,包括 JSP、 
HTML CSS .XML JavaScript Servlet 等 .选择 要 建 的 文件 类 型 。 

在 MyEclipse 中 添加 已 有 的 Java 类 文件 或 JSP 文件 ,由 于 保存 文件 和 打开 文件 使 用 的 
编码 不 同 可 能 导致 出 现 乱码 。 此 时 可 执行 MyEclipse 中 Windows 一 Preferences 菜单 命令 ， 


打开 Preference 对 话 框 ,依次 单 击 General->Workspace, 在 右 侧 的 Text File encoding 中 选 
择 字符 编码 。 或 者 ,在 项 目 节点 上 右 击 ,在 快捷 菜单 中 ,执行 Properities 命令 ,设置 Text 
File encoding 方式 。 也 可 以 先 将 文件 在 “记事 本 ”程序 中 打开 ,在 MyEclipse 中 执行 New 一 
File 命令 新 建文 件 , 将 记事 本 内 容 复制 到 MyEclipse 新 建文 件 中 。 

4. 服务 器 部 署 

在 MyEclipse 中 执行 Windows 菜单 中 的 Show View->Servers 命令 ,打开 Servers 面 
板 , 在 MyEclipse 自 带 的 MyEclipse Tomcat 服务 器 节点 上 , 右 击 ,执行 Add 一 Remove 
Deployments 命令 ,在 列表 中 ,选择 要 部 署 的 Project, 则 在 Servers 面板 窗口 显示 部 署 的 项 
目 。 此 时 ,服务 器 为 Stoped 状态 , 右 击 节点 ,执行 Start 开启 命令 即 可 。 开 启 后 的 
MyEclipse 窗口 如 图 4-13 所 示 。 














4-13 ”服务 器 部 署 


5. 项 目 运行 

服务 器 部 署 完毕 后 ,在 浏览 器 中 就 可 以 查看 WebProject 了 ,在 浏览 器 地 址 栏 输入 
“http://localhost:8080/HaoExampleProject/”, 即 可 显示 项 目 中 的 index. jsp 页 面 了 ,其 中 
HaoExampleProject 为 项 目 名 称 , 区 分 大 小 写 。 

此 时 ,外 网 用 户 也 可 以 访问 上 述 网 站 ,只 要 输入 该 计算 机 的 IP 和 项 目 名 称 即 可 ,其 中 
8080 是 MyEclipse 自 带 Tomcat 的 默认 端口 。 





4.3 使 用 Dreamweaver 


对 于 Web 前 端 开发 ,虽然 许多 熟练 的 开发 人 员 习 惯 使 用 SublimeText 等 代码 编辑 器 编 | 4 
写 网 页 ,但 是 ,对 于 初学 者 来 讲 , 网 页 的 设计 功能 是 非常 重要 的 ,这 是 一 般 的 代码 编辑 器 所 | 章 
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不 具备 的 ,需要 使 用 专门 的 页 面 制作 工具 。Dreamweaver 具有 强大 的 网 页 设计 与 制作 功 
能 ,不 仅 对 于 初学 者 ,对 于 熟练 用 户 ,网 页 的 交互 设计 和 页 面 预览 也 可 以 提高 工作 效率 。 


4.3.1 Dreamweaver 视图 


设计 Dreamweaver 的 基本 目标 就 是 通过 交互 式 操 作 进 行 网 页 设计 ,并 自动 生成 对 应 的 
HTML 代码 。 在 Dreamweaver 程序 主 窗口 ,执行 文件” 一“ 新建 ”命令 ,打开 "新 建文 档 ? 对 
话 框 ,选择 HTML 文档 类 型 ,创建 一 个 新 的 HTML 5 文档 ,如 图 4-14 所 示 。 

















图 4-14 Dreamweaver CC 2015 主 窗口 


在 Dreamweaver 主 窗口 左 侧 区 域 ,为 网 页 设计 与 代码 编辑 窗口 , 右 侧 是 一 组 浮动 窗 格 ， 
列 出 了 用 户 常用 的 一 些 操作 面板 。 在 网 页 设计 窗口 左上 角 , 有 一 组 网 页 视图 模式 选项 标签 ， 
分 别 是 “代码 ”“ 拆 分 “实时 视图 ”和 “设计 ”4 种 显示 模式 。 

1. 代码 视图 

在 新 建 或 打开 一 个 HTML 文档 后 ,打开 “代码 ”选项 卡 ,将 显示 网 页 对 应 的 HTML 代 
码 。 一 般 情况 下 ,用 户 在 设计 模式 下 设计 网 页 ,然后 在 代码 模式 下 查看 网 页 对 应 的 HTML 
代码 。 另 外 ,用 户 也 可 以 直接 在 该 模式 下 编辑 ,修改 其 中 的 HTML 代码 ,适用 于 那些 对 
HTML 比较 熟悉 的 用 户 。 如 果 网 页 中 包含 脚本 程序 , 则 脚本 程序 也 可 以 在 代码 模式 下 进行 
编辑 。 

如 果 用 户 需 要 复制 其 他 网 页 的 HTML 代码 ,应 选择 代码 模式 ,将 被 复制 的 内 容 复制 到 
当前 网 页 的 适当 位 置 ,而 不 应 该 在 设计 模式 下 进行 复制 。 

2. 拆 分 视图 

打开 “ 拆 分 ”选项 卡 ,编辑 窗口 将 分 为 上 下 两 个 区 域 ,下 面 的 区 域 显示 设计 的 网 页 ,上 面 
部 分 显示 对 应 的 HTML 代码 。 该 模式 的 目的 是 将 设计 中 的 网 页 元 素 和 对 应 代码 准确 定 





位 , 当 单 击 设计 视图 的 某 个 网 页 元 素 时 ,在 上 面 的 代码 视图 将 自动 定位 到 该 元 素 对 应 的 
HTML 代码 ,这 对 于 一 个 较 大 的 网 页 修改 是 非常 方便 的 ,便于 手工 调整 。 

3. 设计 视图 

这 是 一 种 可 视 化 的 网 页 设计 模式 。 在 设计 模式 下 ,用 户 可 以 采用 “所 见 即 所 得 ”的 方式 
设计 ,编辑 和 修改 网 页 ,系统 将 自动 生成 对 应 的 HTML 代码 。 代 码 可 在 “代码 ?或 “ 拆 分 ? 视 
图 下 显示 。 这 是 Dreamweaver 工具 的 核心 功能 , 即 通过 交互 设计 自动 生成 代码 。 

4. 实时 视图 

实时 视图 是 一 种 网 页 预览 模式 ,在 网 页 设计 或 编辑 中 , 单 击 “ 实 时 视图 ”, 将 显示 当前 网 
页 在 浏览 器 中 的 显示 效果 ,与 通过 浏览 器 所 看 到 的 网 页 一 致 。 有 时 候 , 实 时 视图 显示 的 结果 
和 用 浏览 器 打开 网 页 的 效果 并 不 完全 一 致 ,需要 以 浏览 器 打开 的 显示 为 准 。 


4.3.2 Dreamweaver 常用 功能 


要 使 用 Dreamweaver, 应 该 先 理解 Dreamweaver 软件 的 设计 目标 ,或 者 说 它 的 功能 定 
位 。 在 Dreamweaver 丰富 的 菜单 命令 中 ,我 们 可 以 看 出 它 的 基本 功能 有 两 个 ,一 个 是 网 页 
设计 , 另 一 个 是 网 站 管理 ,所 有 的 菜单 命令 都 是 围绕 着 这 两 个 基本 功能 来 设计 的 。 

在 这 里 ,我 们 不 准备 讲解 网 站 管理 问题 ,我 们 的 重点 是 学 习 网 页 设计 ,虽然 网 页 最 终 都 
是 属于 网 站 的 。 在 网 页 设计 与 制作 方面 ,Dreamweaver 的 常用 功能 如 下 。 

1. 网 页 设计 

网 页 设计 是 Dreamweaver 的 基本 功能 ,在 设计 视图 可 以 进行 页 面 设 计 。 通过“ 插入” 菜 
单 中 的 各 种 菜单 命令 ,可 以 交互 式 地 在 页 面 中 插入 各 种 HTML 元 素 , 并 可 以 可 视 化 的 方式 
进行 页 面 布局 。 系 统 会 根据 页 面 设计 的 结果 ,自动 生成 对 应 的 HTML 代码 ,从 而 可 以 提高 
手工 编写 HTML 代码 的 效率 。 

2. 代码 编辑 

在 代码 视图 或 拆 分 视图 ,可 以 对 生成 的 代码 手工 编辑 ,并 支持 标记 属性 和 CSS 属性 智 
能 提示 ,可 方便 用 户 修 改 。 同 时 ,因为 设计 视图 自动 生成 的 代码 可 能 会 出 现代 码 宛 余 , 代 码 
的 手工 编辑 可 消除 代码 元 余 ,进一步 提高 代码 质量 。 

3. CSS3 样式 表 设 计 

通过 CSS 面板 设置 样式 ,可 支持 CSS3 规则 。 设 计 视图 支持 媒体 查询 ,在 调整 屏幕 尺寸 
的 同时 可 应 用 不 同 的 样式 。 同 时 提供 代码 提示 和 设计 视图 泻 染 支持 。 

4. JQuery 集成 

jQuery 是 行业 标准 JavaScript 库 , 可 以 为 网 页 轻松 加 入 各 种 交互 功能 , Dreamweaver 
支持 jQuery 代码 集成 。 

5. 文档 验证 功能 

在 “文件 ”菜单 中 ,增加 了 文档 验证 功能 ,以 便 检 查 文档 中 的 错误 。 对 于 XML 文档 ,可 
以 检查 文档 是 否 结构 良好 和 有 效 。 


4.3.3 新 建 网 页 文件 


一 个 网 站 对 应 一 个 主 目录 ,里 面包 含 了 大 量 的 网 页 文件 ,这些 网 页 通常 按照 网 页 功能 组 
织 在 不 同 的 文件 夹 中 。 因 此 ,一 个 网 站 和 传统 的 软件 开发 中 的 一 个 项 目 (Project) 类 似 ,每 
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一 个 网 页 文件 都 是 网 站 的 一 部 分 。 一 种 良好 的 网 页 制作 思想 是 ,在 新 建 或 编辑 网 页 以 前 ,应 
该 先 打开 一 个 站 点 ,因为 任何 网 页 都 是 一 个 站 点 的 一 部 分 ,而 不 是 孤立 存在 的 。 当 然 ,我 们 
可 以 直接 新 建 一 个 网 页 文件 ,而 不 是 先 打 开 一 个 网 站 。 这 样 做 的 缺点 是 , 当 修 改 了 网 页 、 图 
片 等 文件 位 置 时 ,相关 的 超 链接 必须 手工 修改 ,不 能 自动 重 构 。 

1. 新 建 或 导 人 网 站 

在 Dreamweaver 主 窗口 ,在 右 侧 的 “文件 ”浮动 面板 , 单 击 “ 管 理 站 点 "命令 ,打开 “管理 
站 点 ”对 话 框 ,可 以 新 建 或 导入 一 个 站 点 , 即 指定 一 个 文件 夹 作 为 站 点 根 目 录 , 以 后 网 页 都 将 
保存 在 该 日 录 下 或 其 子 目录 中 。 

2. 新 建 网 页 文件 

在 “文件 ”菜单 中 ,执行 “新 建 "命令 ,打开 “新 建文 档 ” 对 话 框 ,如 图 4-15 所 示 。 


bx 
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辣 加 多 二 Extract 从 Photoshop 复合 中 构 如 页 硬 











4-15 新 建 网 页 模板 对 话 框 


选择 HTML 5 文档 类 型 , 则 创建 一 个 新 的 HTML 5 文档 。 新 建 网 页 后 ,系统 将 生成 一 
个 HTML 文档 内 容 的 基本 框架 ,在 “代码 ”视图 或 “ 拆 分 ?视图 下 ,可 以 看 到 相应 的 HTML 
代码 内 容 , 如 图 4-16 所 示 。 

从 上 述 代码 也 可 以 看 到 ,在 文档 的 < body >…</body > 标记 之 间 , 还 没有 内 容 , 具 体内 
容 根 据 用 户 的 需要 来 设计 。 

使 用 Dreamweaver 设计 网 页 ,实际 上 就 是 在 设计 视图 ,在 网 页 中 输入 文本 ,利用 “格式 
化 "菜单 对 文本 进行 格式 化 ,或 利用 “插入 "菜单 插入 图 片 . 超 链 接 、 表 格 、 表 单 等 操作 ,以 便 在 
网 页 中 添加 所 需 的 元 素 ,然后 Dreamweaver 将 自动 生成 对 应 的 HTML 代码 ,从 而 简化 
HTML 文档 的 手工 编写 任务 。 

为 了 扩大 网 页 编辑 窗口 的 空间 ,可 以 将 右 侧 的 浮动 面板 关闭 ,如 果 需 要 打开 ,执行 “ 查 
看 ”菜单 中 的 “隐藏 面板 ”命令 (F4) 即 可 。 











| | 代码 [3 | 设计 | 





























图 4-16 新 建 网 页 后 系统 自动 生成 HTML 代码 


网 页 编辑 完成 后 ,在 “文件 "菜单 中 ,执行 “保存 ”命令 ,或 者 直接 单 击 “ 常 用 "工具 栏 中 的 
“保存 文件 ”按钮 ,保存 当前 网 页 。 如 果 网 页 文件 是 第 一 次 存盘 , 则 打开 “另存 为 ”对话 框 ,在 
“另存 为 "对话 框 中 ,选择 网 页 的 存储 位 置 文件 名 和 保存 类 型 。 


4.4 网 页 设计 


当 网 页 文件 创建 后 , 接 下 来 就 是 网 页 内 容 的 编辑 了 。 网 页 文件 是 一 种 符合 HTML 规 
范 的 纯 文 本 文件 ,可 以 使 用 任意 的 文本 编辑 器 进行 编辑 ,但 是 这 需要 非常 熟悉 HTML 规 
范 。 特 别 是 对 于 初学 者 ,手工 编写 代码 效率 较 低 ,容易 出 错 。 使 用 Dreamweaver 工具 进行 
网 页 设计 ,自动 生成 对 应 的 HTML 代码 ,可 简化 HTML 代码 编写 工作 ,提高 工作 效率 。 


4.4.1 输入 文本 与 格式 化 


在 一 个 网 页 中 ,文字 几乎 都 是 不 可 少 的 元 素 。 在 HTML 规范 中 ,有 很 多 标记 用 于 对 文 
本 进行 标记 ,如 : <p>、<font>、<i>、< bold >、< em > 等 ,使 用 这 些 标记 可 以 实现 文本 显示 
的 格式 化 , 即 设 定 文本 在 浏览 器 中 的 显示 效果 。 在 HTML 5 中 ,许多 格式 化 标记 已 经 被 废 
弃 , 取 而 代 之 的 是 用 CSS 样式 来 设置 元 素 样式 。 

在 Dreamweaver 中 ,文本 的 输入 和 格式 化 非常 简单 。 在 设计 视图 或 拆 分 视图 ,在 编辑 
区 域 输入 文字 即 可 。 如 果 要 对 文字 进行 格式 化 ,首先 选中 要 格式 化 的 文字 ,然后 使 用 “格式 ” 
菜单 命令 对 文本 进行 格式 化 。 

例如 ,在 拆 分 视图 输入 文本 “泰山 ”, 在 代码 视图 可 以 看 到 < body > 标记 内 ,添加 了 “ 泰 
山 ” 两 个 字 , 但 文字 没有 做 任何 标记 。 如 果 需 要 将 文字 设置 成 一 个 段落 ,颜色 为 红色 ,水 平 居 
中 ,如 何 操 作 呢 ? 

首先 选中 要 格式 化 的 文字 , 单 击 “ 格 式 ” 菜 单 , 可 以 看 到 Dreamweaver 的 文本 格式 化 分 
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为 4 个 方面 : 段落 格式 、 列 表 、HTML 样式 .CSS 样式 。 单 击 段落 样式 中 的 “段落 ”, 可 以 看 
到 文字 添加 了 < p > 标记 。 然 后 ,将 文字 标记 为 红色 ,在 HTML 样式 中 , 找 不 到 文字 颜色 的 
设置 命令 ,因为 HTML 5 希望 所 有 的 颜色 设置 都 是 通过 CSS 属性 设置 的 。 

在 “格式 ”菜单 中 ,指向 *CSS 样式 ”级 联 菜单 ,可 以 看 到 “附加 样式 表 ” 命 令 , 而 此 时 我 们 
还 没有 样式 表 。 而 “将 内 联 样 式 转化 为 规则 ”菜单 命令 为 灰 化 状态 ,不 可 用 ,但 提醒 了 我 们 下 
一 步 可 以 直接 在 < p > 标记 中 使 用 内 联 样式 , 即 在 代码 视图 ,直接 输入 style 二 "color:red;"。 
输入 完毕 后 ,可 以 看 到 “将 内 联 样 式 转化 为 规则 ”菜单 命令 不 再 灰 化 ,执行 该 命令 ,打开 “转换 
内 联 CSS” 对 话 框 ,如 图 4-17 所 示 。 




















转换 为 上) - [新 的 .CSS 选择 器 了 tetrp 


在 以 下 位 置 创建 规则 


样式 表 G) 
国 焉 广 柱 5 广 作 天 0 








图 4-17 转换 内 联 CSS 样式 对 话 框 


选择 “此 文档 的 文件 头 " 单 选 按 钮 , 单 击 “ 确 定 ” 按 钮 。 在 代码 视图 ,可 以 看 到 文档 头 部 增 
加 了 内 联 样式 表 定 义 ,如 图 4-18 所 示 。 
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图 4-18 创建 CSS 内 联 样式 


在 拆 分 视图 ,可 以 看 到 在 < body >…</body > 标记 内 增加 了 代码 : <p > 你 好 </pP >, 样 式 
定义 写 在 了 文档 头 部 的 < style > 标记 中 ,以 保证 文档 内 容 和 样式 定义 的 分 离 。 

可 以 看 到 ,上 述 HTML 代码 都 是 Dreamweaver 根据 用 户 的 输入 和 格式 化 操作 自动 生 
成 的 ,可 见 通过 Dreamweaver 网 页 制作 工具 进行 网 页 设计 要 比 用 Windows "记事 本 ”、 
SublimeText 代码 编辑 器 等 程序 手工 书写 HTML 代码 方便 和 快捷 得 多 ,并 且 也 不 容易 出 





错 , 不 需要 记忆 各 种 标记 属性 ,这 也 正 是 Dreamweaver 等 网 页 制作 工具 的 优势 所 在 。 
4.4.2 插入 图 片 


在 网 页 制作 中 经 常 需 要 插入 一 些 图 片 ,以 达到 丰富 信息 内 容 和 美化 页 面 的 双重 功能 。 
在 网 页 中 插入 图 片 , 即 通 过 < img > 标记 来 指向 一 个 图 片 文件 ,为 了 页 面 布局 的 需要 ,通常 还 
需要 设置 < img > 标记 的 属性 。 例 如 ,我 们 设计 一 个 介绍 泰山 的 网 页 ,在 文字 中 插入 一 幅 泰 
山 日 出 的 图 片 。 具 体操 作 步 又 如 下 : 

(1) 将 插入 点 定位 到 要 插入 图 片 的 地 方 ( 本 例 定位 到 文字 的 开始 ) 。 

(2) 执行 “插入 ”一 “图 像 " 菜 单 命令 .打开 “选择 图 像 源 文件 ” 对 话 框 。 选 择 要 插入 的 图 
片 文件 , 单 击 “ 插 入 ”按钮 , 则 图 片 自动 以 无 环绕 样式 的 方式 插入 到 网 页 中 。 

(3) 设置 图 片 属性 。 由 于 图 片 的 高 度 和 文字 不 一 致 , 接 下 来 应 该 设置 图 片 的 环绕 方式 。 
右 击 图 片 ,在 快捷 菜单 中 ,选择 对 齐 方式 为 右 对 齐 。 

设置 完成 后 的 页 面 如 图 4-19 所 示 。 


秦山 是 中 国 五 岳之 首 ， 古 名 佑 山 ， 又 名 优 宗 。 秦山 位 于 山 
东 省 中 部 ， 奉 安 市 境内 ， 瘟 立 在 鲁 中 群 山中 ， 主 峰 玉 皇 顶 ， 将 
撤 154s 米 。 泰山 山体 雄伟 性 观 ， 景 色 秀丽 。 古 以 东方 为 万 物 交 
普 、 初 春 发 生 之 地 。 故 泰山 有 -五 岳之 长 "、` 五 岳 独 苯 " 之 誉 。 


早 在 夏 、 商 时 代 ， 就 有 72 位 君王 来 泰山 会 诸侯 、 定 大 位 ， 刻 石 记 号 。 秦始皇 统一 中 国 


封 禅 秦山 后 ， 汉 代 武 帝 、 光 武帝 ， 唐 代 高 宗 、 玄 宗 ， 宋 代 真 宗 ， 清 代 康 巾 、 辊 隆 等 也 都 相 
继 效 仿 来 秦山 举行 封 神 大 拱 ， 所 到 之 处 ， 建 庙 塑 像 ， 刘 石 是 字 ， 为 秦山 留 下 了 大 量 的 文物 
古迹 。 历 代 著 名 的 文人 学 士 ， 也 都 幕 名 相继 来 此 ， 赞 颁 秦 山 的 诗词 、 软 赋 多 达 一 千 余 首 。 
杜甫 的 "望月 诗 ，` 会 当 写 绝顶 ， 一 览 众 山 小 。" 已 成 为 流传 千古 的 名 诗 。 


泰山 同时 又 是 化 、 道 两 教之 地 ， 因 而 庙宇 、 名 胜 饥 布 全 山 。 因此， 秦山 不 仅 有 准 奇 杜 
丽 的 山 势 ， 而 且 有 众多 的 文物 古迹 ， 也 是 一 产道 教 名 山 。 山 顶 更 有 四 大 奇观 ， 旭 日 末 升 、 
晚 过 性 妥 、 凋 河 金 代 、 云 尘 玉 僵 ， 实 乃 一 处 名 冠 世界 的 文物 宝库 和 游览 胜地 。198? 年 底 ， 
世界 保护 自然 与 文化 资源 委员 会 已 将 秦山 列 入 < 世界 遗产 名 录 》。 


; 
ea erd! 可 O. stz > slv 











图 4-19 在 网 页 中 插入 图 片 


单 击 “ 代 码 ?或 “ 拆 分 ?视图 ,可 以 看 到 在 < body >…</body > 标记 内 增加 了 一 行 类 似 下 
面 的 代码 : 


< img src = "images/taishan01.JPG" alt= "" width= "189" height = "110" align = "right"/> 


对 于 < img > 标记 的 src 属性 ,如 果 是 在 一 个 新 建 的 网 页 中 插入 图 片 , 在 当前 网 页 尚未 保存 
前 执行 插入 图 像 操 作 , 因 为 无 法 判断 网 页 文件 和 图 片 文件 之 间 的 相对 路 径 ,src 将 设置 图 片 的 
绝对 路 径 。 此 时 ,如 果 将 新 建 的 网 页 先 保存 一 次 ,再 插入 图 片 时 ,在 HTML 代码 中 就 会 使 用 相 
对 路 径 。 或 者 ,即使 不 是 先 插入 了 图 片 ,只 要 保存 一 次 HTML 文件 ,原先 的 绝对 路 径 也 会 变 成 
相对 路 径 。 但 是 ,如 果 HTML 文件 和 图 片 不 在 一 个 驱动 器 上 ,将 不 能 转换 成 相对 路 径 。 

最 后 要 记 住 ,既然 是 一 个 Web 应 用 ,所 有 的 网 页 和 用 到 的 图 片 以 及 其 他 各 种 文件 都 应 
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该 保存 在 Web 站 点 的 主 目录 下 ,或 者 主 目录 下 面 的 子 目录 下 。 所 有 这 些 文件 共同 构成 了 一 
个 Web 应 用 ,所 有 的 引用 都 应 该 是 相对 路 径 , 这 样 当 Web 应 用 , 即 该 站 点 被 复制 到 其 他 的 
目标 位 置 时 , 才 不 会 出 现 找 不 到 网 页 或 图 片 的 错误 。 因 此, 如果 页 面 编辑 前 执行 了 “打开 网 
站 ”命令 , 当 插入 的 图 片 不 在 主 目录 下 ,保存 网 页 时 会 出 现 “ 保 存 嵌入 式 文件 ”提示 对 话 框 。 

图 片 插入 以 后 它 在 页 面 上 的 大 小 位置 等 可 能 并 不 理想 。 要 使 得 图 片 符合 用 户 的 要 求 ， 
需 通 过 设置 图 片 属性 来 完成 。 图 片 属性 的 设置 分 别 对 应 了 < img > 标记 的 不 同属 性 ,用 户 可 
以 通过 “ 拆 分 ”或 “代码 ”视图 查看 生成 的 HTML 代码 。 此 外 ,将 图 片 直接 插入 网 页 中 ,要 进 
行 精细 的 布局 是 很 困难 的 ,要 对 网 页 进行 布局 ,通常 需要 使 用 表格 来 完成 。 


4.4.3 建立 超 链接 或 书签 


使 用 Dreamweaver 在 网 页 中 建立 超 链接 非常 简单 ,只 需要 选 定 超 链接 的 文本 或 图 片 ， 
然后 ,在 “插入 "菜单 中 ,执行 Hyperlink 命令 ,打开 一 个 Hyperlink 对 话 框 ,在 超 链接 对 话 框 
中 输入 被 链接 的 URL 即 可 。 

具体 操作 步骤 如 下 : 

(1) 选 定 要 建立 超 链 接 的 文本 。 

(2) 选择 菜单 “插入 ”、Hyperlink, 打 开 Hyperlink 对 话 框 ,如 图 4-20 所 示 。 





图 4-20 Hyperlink 对 话 框 


(3) 在 Hyperlink 对 话 框 中 ,在 “链接 ”后面 的 文本 框 可 以 输入 或 选择 要 链接 的 目标 
URL。 在 “目标 ”后面 的 列表 中 ,可 以 选择 网 页 打开 的 目标 窗口 , 即 设置 <a > 标记 的 target 
属性 值 。 在 标题 后 面 的 文本 框 ,设置 <a > 标记 的 title 属性 值 。 

当 上 述 设置 完成 后 , 单 击 “ 确 定 ” 按 钮 ,完成 超 链接 的 建立 , 即 建立 一 个 文本 超 链接 。 自 
动 生成 对 应 的 HTML 代码 ,形式 如 下 : 


<a href = "poems/wangyue. htm" target = " blank" >« 望 月 »</a> 

对 于 a 元素 的 其 他 属性 ,我 们 可 以 在 代码 视图 手工 添加 ,也 可 以 手工 将 < a > 元 素 修改 为 
书签 ,在 超 链接 中 使 用 网 页 书签 。 也 可 以 建立 CSS 样式 ,修改 超 链 接 的 默认 显示 样式 。 
4.4.4 插入 表格 


在 网 页 中 ,表格 不 仅仅 用 来 显示 数据 ,而 且 表 格 还 是 进行 网 页 布局 的 重要 工具 。 使 用 表 
格 , 可 对 各 种 网 页 元 素 的 位 置 进行 精确 控制 ,例如 文字 和 图 片 混 排 ,从 而 使 设计 的 网 页 布局 
整齐 、 美 观 。 


在 Dreamweaver 中 ,要 在 网 页 中 插入 表格 ,在 设计 视图 ,首先 将 鼠标 定位 到 要 插入 表格 
的 位 置 ,然后 按照 下 面 步骤 操作 : 

(1) 选择 菜单 “插入 ”, 执 行 “ 表 格 ? 菜 单 命 令 ， 
打开 Table 对 话 框 ,如 图 4-21 所 示 。 

(2) 在 Table 对 话 框 ,可 以 设置 表格 属性 , 即 
Table 标记 有 关 属 性 。 在 表格 大 小 区 域 .包括 表格 
的 行 数 和 列 数 ,表格 宽度 ,边框 粗细 和 单元 格 边 距 
及 单元 格 间 距 。 在 标题 区 域 , 可 以 设置 表格 标题 行 
(< th > 单元 格 标记 ) 的 位 置 等 。 

表格 标记 的 属性 很 多 ,对 其 他 属性 的 设置 可 以 
在 代码 视图 通过 手工 输入 完成 。 一 个 好 的 习惯 是 
定义 一 组 CSS 样式 表 , 分 别 定义 < table >、< td > 等 
标记 的 显示 样式 。 使 用 CSS 样式 表 来 定制 Table 
的 外 观 是 一 种 良好 的 页 面 制作 习惯 ,便于 对 网 页 进 
行 修改 。 图 4-21 Table 对 话 框 


4.4.5 插入 表单 


表单 (Form) 是 Web 中 人 机 交互 的 主要 手段 , 它 由 一 系列 输入 元 素 组 成 。 与 HTML 4 相 
比 ,HTML 5 中 的 输入 元 素 类 型 进行 了 大 量 扩充 ,以 适应 当前 Web 开发 的 需要 。 使 用 
Dreamweaver 在 网 页 中 插入 表单 ,具体 操作 步骤 如 下 ， 

(1) 在 “插入 ”菜单 中 ,指向 “表单 ”执行 “表单 "菜单 命令 ,插入 一 个 表单 ,然后 依次 执行 
要 插入 的 控件 (表单 元 素 ) 命 令 , 以 便 在 表单 中 插入 需要 的 表单 元 素 。 

此 时 ,在 设计 视图 ,看 到 一 个 虚线 矩形 框 , 这 是 < form > 元 素 的 可 视 化 表示 。 在 代码 视 
图 ,自动 生成 下 列 代码 : 











<form id= "forml" name = "forml" method = "post"> 

</form> 

(2) 调整 表单 布局 。 表 单一 般 和 表格 联合 使 用 .通过 表格 设置 表单 布局 。Dreamweaver 
自动 生成 的 代码 会 出 现 标 记 交 又 的 情况 ,为 此 ,可 以 在 “ 拆 分 ”或 “代码 ”视图 中 ,手工 调整 代 
码 。 例 如 ,将 < form ></form > 标记 对 调整 到 < table ></table > 标记 对 的 外 面 。 

在 插入 表单 或 控件 时 ,如 果 生 成 多 个 < form > 标记 ,根据 需要 可 以 手工 删除 ,只 保留 一 
个 < form ></form > 标记 对 ,手工 把 所 有 的 控件 标记 都 移动 到 < form ></form > 内 部 。 

(3) 设置 表单 属性 ,在 代码 视图 ,可 以 手工 设置 < form > 标记 属性 ,例如 name 属性 、 
action 属性 ,target 属性 等 。 

(4) 设置 表单 元 素 属 性 ,在 表单 输入 元 素 上 右 击 ,在 快捷 菜单 中 ,执行 “属性 ”命令 ,打开 
表单 输入 元 素 “ 属 性 ”对 话 框 。 不 同类 型 的 输入 元 素 ,其 属性 框 也 不 相同 ,文本 (text) 对 应 的 
元 素 属 性 对 话 框 如 图 4-22 所 示 。 

在 “属性 ”对 话 框 中 ,输入 相应 的 属性 值 .这 些 值 都 对 应 了 输入 元 素 相应 的 属性 。 为 脚本 
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图 4-22 文本 (text) 属 性 对 话 框 


编程 需要 ,一 般 要 设置 名 称 等 属性 。 输 入 完成 后 . 单 击 右 上 角 的 关闭 按钮 。 
当 表 单 和 元 素 属性 设置 结束 后 ,切换 到 “代码 ”视图 或 “ 拆 分 "视图 ,可 以 看 到 生成 的 
HTML 代码 如 下 : 
<form id = "forml" name = "form1l" method= "post"> 
< label for = "useraccount"> Text Field:</label > 


< input name = "useraccount" type= "text" id = "useraccount" value = "guest"> 
</form> 


在 实际 开发 中 ,通常 会 遇 到 在 一 个 网 页 中 ,有 多 个 Form 表单 的 情况 ,每 个 表单 都 可 以 
单独 提交 。 也 可 以 设置 一 个 统一 提交 的 表单 ,定义 多 个 hidden 元 素 , 把 其 他 表单 的 数据 都 
保存 到 该 表单 中 ,提交 该 表单 可 以 实现 所 有 数据 的 统一 提交 。 

4.4.6 插入 div 


块 元 素 div 是 HTML 页 面 布局 的 重要 工具 。 在 Dreamweaver 中 ,选择 设计 视图 ,在 
“插入 ”菜单 中 执行 Div 命令 ,打开 “插入 Div” 对 话 框 ,如 图 4-23 所 示 。 














图 4-23 插入 图 层 及 其 属性 设置 


在 插入 Div 对 话 框 ,在 Class 和 ID 后 面 可 以 输入 一 个 Class 名 或 ID 名 ,也 可 以 选择 列 
表 文档 中 已 定义 的 样式 表 。 然 后 单 击 “ 确 定 " 按 钮 ,系统 生成 代码 如 下 : 


<div class = "helptop”id= "help"> 此 处 显示 class "helptop" id "help" 的 内 容 </div> 


对 上 述 生 成 的 代码 ,可 以 按照 需要 ,在 代码 视图 进行 手工 编辑 ,或 者 定义 该 div 的 样式 
表 , 将 CSS 规则 应 用 于 div。 


4.5 设置 标记 属性 


在 HTML 规范 中 ,每 个 标记 都 含有 不 同 的 属性 ,通过 设置 标记 属性 可 以 修改 标记 的 默 
认 显 示 样 式 。 标 记 的 属性 众多 ,很 难 记 忆 。 利 用 Dreamweaver 网 页 制作 工具 ,在 “设计 ” 视 


图 下 ,通过 一 些 标记 的 属性 对 话 框 可 以 进行 标记 的 属性 设置 。 除 此 之 外 ,还 可 以 在 “代码 ” 视 
图 下 ,通过 智能 感知 技术 显示 标记 属性 或 CSS 属性 ,进行 属性 设置 。 


4.5.1 使 用 属性 对 话 框 


在 现代 软件 中 ,对 于 每 一 个 对 象 , 无 论 是 操作 系统 级 的 对 象 (如 文件 夹 ,文件 等 ), 还 是 软 
件 系 统 中 的 对 象 ,例如 Dreamweaver 设计 视图 下 的 各 个 元 素 ,例如 表格 、 单 元 格 、 表 单 、 输 入 
域 , 还 是 div, 右 击 一 个 对 象 ,都 会 弹出 一 个 快捷 菜单 ,里 面包 含 了 当前 对 象 的 常用 操作 命令 ， 
这 就 大 大 地 方便 了 对 象 的 操作 。 

在 Dreamweaver 中 ,设置 标记 属性 ,可 以 在 设计 视图 中 ,在 对 象 上 右 击 , 弹 出 快捷 菜单 ， 
执行 “属性 ”命令 ,在 属性 对 话 框 中 ,进行 设置 ,这 种 设置 将 修改 代码 视图 中 生成 的 代码 , 即 修 
改 标 记 的 属性 。 


4.5.2 IntelliSense 技术 


现在 大 多 数 的 开发 环境 都 使 用 智能 感知 (IntelliSense) 技 术 为 用 户 提 供 帮助 。 所 谓 
IntelliSense, 是 指 当 用 户 编辑 到 一 个 对 象 时 ,系统 能 动态 地 显示 当前 对 象 的 方法 、 属 性 名 列 
表 , 从 而 保证 用 户 输入 的 正确 性 ,或 从 中 选择 输入 。 在 Borland 的 开发 环境 中 ,类 似 的 技术 
称 为 CodeInsight。 下 面 举例 说 明 。 

在 一 个 网 页 中 ,假定 要 设置 < body > 标记 的 属性 。 单 击 * 代 码 ? 视 图 ,将 插入 点 定位 到 
< body > 标记 ,在 标记 名 的 后 面 , 按 空格 键 , 则 自动 打开 一 个 窗口 ,显示 < body > 标记 的 所 有 
属性 列表 ,包括 一 般 属性 和 事件 属性 ,如 图 4-24 所 示 。 
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图 4-24 使 用 IntelliSense 技术 


要 显示 CSS 样式 属性 ,在 标记 中 输入 style 二 "" ,在 双 引 号 中 输入 空格 , 则 显示 CSS 样 
式 属 性 。 现 在 大 多 数 软件 都 使 用 了 IntelliSense 技术 .有 的 软件 默认 情况 下 不 打开 智能 感 
知 ,需要 对 软件 进行 设置 ,开启 IntelliSense 功能 。 
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4.6 定义 和 使 用 CSS 样式 


层 到 样式 表 CSS 技术 是 HTML 技术 的 核心 ,不 仅 可 以 保证 网 站 显示 风格 的 一 致 性 , 同 
时 , 它 实现 了 内 容 和 显示 的 分 离 , 也 可 以 保证 文档 结构 良好 。CSS 样式 表 的 应 用 可 以 分 为 
三 种 情况 , 即 内 联 样 式 、 内 部 样式 和 外 部 样式 。 由 于 CSS 样式 属性 众多 .样式 表 的 定义 比较 
麻烦 。 在 Dreamweaver 中 ,提供 了 新 建 样 式 和 修改 样式 表 功 能 。 为 了 在 多 个 页 面 中 实现 样 
式 的 共享 ,可 以 将 用 户 自 定义 样式 存储 为 样式 表 CSS 文件 , 即 外 部 样式 。 


4.6.1 定义 样式 规则 


如 果 要 在 一 个 网 页 中 使 用 样式 ,可 以 在 标记 中 使 用 style 定义 样式 , 即 内 联 样式 。 也 可 

以 将 NE 部 的 < style > 标记 对 内 , 即 内 部 样式 。 
定义 内 联 样式 

pe 中 ,在 标记 中 可 以 手工 地 定义 内 联 样式 ,输入 标记 属性 style 二 "" ,在 双 引 号 
中 输入 空格 ,可 显示 CSS 属性 列表 ,以 此 定义 CSS 属性 。 

2. 定义 内 部 样式 

内 部 样式 是 指 在 文档 头 部 style 标记 内 定义 的 样式 。 用 户 可 以 在 代码 视图 手工 编写 样 
式 , 方 法 和 定义 内 联 样式 一 样 。 或 者 将 内 联 样式 转换 为 内 部 样式 ,选择 要 转换 的 样式 ,执行 
“格式 "一 “CSS 样式 ”>“ 将 内 联 CSS 转换 为 规则 ?命令 即 可 。 

3. 定义 外 部 样式 

为 了 在 多 个 网 页 中 共享 样式 定义 ,可 以 将 样式 保存 为 一 个 样式 表 文 件 (. css) ,外 部 样式 
就 是 定义 在 样式 表 文 件 中 的 样式 。 要 创建 样式 表 文 件 ,一 般 步骤 如 下 : 

(1) 执行 “文件 ”一 "新建" 命令 ,打开 “新 建文 档 ” 对 话 框 ( 见 图 4-15)。 在 “新 建文 档 ” 对 
话 框 的 文档 类 型 列表 中 ,选择 CSS, 然 后 单 击 “ 创 建 "按钮 ,进入 CSS 代码 编辑 窗口 ,如 图 4-25 
所 示 。 
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图 4-25 新 建 CSS 文档 


(2) 编辑 样式 表 , 在 CSS 代码 编辑 窗口 ,可 以 手工 编辑 CSS 样式 规则 ,输入 空格 将 显示 
CSS 属性 列表 。 因 为 CSS 列表 项 很 多 , 随 着 用 户 输入 ,系统 将 以 此 缩小 列表 范围 ,方便 用 户 
输入 。 选 择 CSS 属性 后 ,系统 将 进一步 提示 属性 的 可 能 取 值 ,供用 户 选 择 。 

当 CSS 规则 定义 好 后 ,执行 "文件 "一 保存 "命令 ,最 后 将 文件 保存 为 . css 文件 。 


4.6.2 使 用 样式 表 文 件 


当 样 式 表 文件 定义 后 ,多 个 网 页 就 可 以 共用 样式 了 ,从 而 保证 网 站 中 网 页 风格 的 一 致 
性 ,提高 站 点 的 可 维护 性 。 在 一 个 网 页 中 使 用 样式 表 文 件 ,一 般 步骤 是 : 

在 “格式 ”菜单 中 ,执行 “CSS 样式 ”附件 样式 表 ? 命 令 ,打开 * 使 用 现 有 的 CSS 文件 ” 
对 话 框 ,如 图 4-26 所 示 。 











图 4-26 链接 外 部 CSS 文件 
输入 或 选择 要 使 用 的 样式 表 文件 ,选择 添加 方式 为 "链接" 单 选 按 钮 , 单 击 “确定 ”按钮 ， 
则 代码 视图 中 ,在 文档 头 部 添加 HTML 代码 如 下 : 
<1link href = "pubcss/common. css" rel = "stylesheet" type = "text/css"> 
此 后 ,在 该 文档 中 ,就 可 以 使 用 上 述 样式 表 中 定义 的 样式 了 。 
网 页 文件 和 样式 表 文 件 采用 相对 路 径 ,一般 情况 下 ,一 个 网 站 会 建立 一 个 公共 CSS 样 
式 表 文件 夹 ,保存 网 站 中 定义 的 公共 样式 。 


本 章 小 结 


本 章 首 先 讨 论 了 网 页 设计 的 概念 ,将 网 页 设计 分 为 面向 业务 逻辑 的 功能 性 设计 (交互 设 
计 ) 和 面向 用 户 体验 的 视觉 设计 两 个 不 同 的 层面 。 然 后 重点 讨论 了 面向 用 户 体 验 的 页 面 布 
局 设计 ` 页 面 视觉 设计 和 页 面 效果 设计 的 有 关 问 题 。 讲 解 了 Web 开发 中 不 同 层面 的 开发 工 
有 具 的 概念 ,包括 代码 编辑 器 .制作 工具 和 集成 开发 环境 。 然 后 以 Dreamweaver 网 页 制作 工 
有 具 为 例 ,讲解 了 网 页 设计 和 代码 编辑 的 基本 过 程 .展示 网 页 制作 工具 在 网 页 制作 中 的 作用 ， 
即 自动 生成 HTML 代码 ,以 提高 手工 编写 代码 的 效率 ,同时 还 介绍 了 IntelliSense 技术 的 
使 用 。 





网 页 讼 计 与 制作 
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习 题 
一 、 简 答题 
1. 在 进行 页 面 布局 设计 时 ,需要 考虑 哪些 因素 ? 请 上 网 进行 搜索 ,总 结 一 下 有 哪些 常 
用 的 网 页 布局 。 


2. 什么 是 页 面 视觉 设计 ? 有 哪些 主要 内 容 ? 

3. 简要 说 明 页 面 设计 的 主要 步骤 。 在 页 面 效果 设计 中 ,为 什么 要 进行 切 图 ? 

4. 对 于 Dreamweaver 工具 ,回答 下 列 问题 : 

(1) Dreamweaver 的 核心 功能 是 什么 ? 

(2) 在 Web 开发 中 ,网 页 制作 的 流程 中 , 先 打 开 网 站 ,然后 新 建 网 页 或 对 已 有 网 页 进行 
编辑 ,这 样 的 一 个 流程 反映 了 什么 思想 ? 

(3) 在 Dreamweaver 中 ,可 以 在 不 打开 网 站 的 情况 下 ,直接 新 建 一 个 网 页 吗 ? 

(4) Dreamweaver 设计 “ 拆 分 "视图 的 目的 是 什么 ? 

5. 怎样 在 HTML 文档 中 插入 图 片 ? <img > 标记 的 常用 属性 有 哪些 ?怎样 将 这 幅 图 片 
放 在 居中 位 置 ? 

6. 在 “图 片 属性 ”对 话 框 中 可 以 进行 哪些 属性 的 设置 ? 怎样 将 图 片 设置 成 文字 环绕 的 
形式 ? 

7. 在 HTML 中 ,一 个 表单 的 < form ></form > 标记 对 将 产生 换行 ,如 果 使 用 表格 
(table) 进 行 页 面 布局 ,如 何 手工 调整 < form ></form > 标记 对 的 位 置 ? 

二 、 综合 设计 题 

利用 Dreamweaver、Photoshop 或 其 他 媒体 制作 和 页 面 制 作 工 具 , 结 合 HTML 代码 的 
手工 调整 ,设计 并 制作 个 人 主页 ,具体 要 求 如 下 : 

(1) 个 人 主页 的 内 容 要 全 面 反映 个 人 相关 信息 。 

(2) 页 面 布 局 .图 片 文本 等 元 素 要 美观 大 方 。 

(3) 代码 简洁 。 

(4) 灵活 使 用 CSS ,便于 代码 维护 。 

(5) 显示 兼容 性 好 ,页 面 布局 要 自 适应 浏览 器 窗口 大 小 变化 。 

(6) 所 用 素材 和 页 面 文件 及 文件 夹 命名 规范 ,各 种 连接 使 用 相对 路 径 。 
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【本 章 导读 】 

网 页 不 仅仅 包含 HTML 元 素 ,通常 还 包含 脚本 程序 ,它们 增加 了 页 面 的 交互 和 计算 能 
力 ,使 网 页 更 生动 、 功 能 更 强大 。 脚 本 程序 分 为 客户 端 脚 本 程序 和 服务 端 脚 本 程序 两 种 , 它 
们 分 别 在 Web 浏览 器 中 和 Web 服务 器 上 执行 。 因 此 ,在 Web 开发 中 ,可 分 为 前 端 开发 和 
后 端 开发 两 个 部 分 。 前 端 开发 是 指 客户 浏览 器 端的 开发 ,包括 网 页 制作 和 客户 端 编 程 。 后 
端 开发 则 是 指 服 务 器 端的 开发 ,主要 是 业务 逻辑 处 理 和 数据 库 编程 。 

本 章 介 绍 前 端 开 发 中 的 客户 端 编 程 问题 ,首先 讲解 Web 浏览 器 和 客户 端 脚本 程序 的 关 
系 , 对 浏览 器 的 工作 原理 进行 分 析 , 它 是 理解 脚本 程序 和 脚本 编程 的 关键 。 然 后 以 
JavaScript 语言 为 例 , 讲 解 客户 端 脚本 编程 问题 ,包括 JavaScript 程序 语言 ,对 象 及 其 操作 ， 
内 部 对 象 及 函数 ,HTML 文档 对 象 模型 以 及 库 和 jQuery。 根 据 在 Web 开发 中 的 具体 需求 ， 
详细 讲解 了 Web 开发 中 有 关 表 单 编程 中 遇 到 的 问题 ,包括 数据 的 获取 、 可 靠 性 验证 、 网 页 参 
数 传递 等 ,并 提供 了 大 量 的 实用 代码 ,最 后 给 出 了 几 个 综合 案例 。 

【知识 要 点 】 

5.1 节 : 计算 机 程序 ,程序 设计 语言 , 源 程序 ,解释 执行 ,程序 编译 ,程序 运行 。 

5.2 节 : 浏览 器 脚本 引擎 ,客户 端 脚 本 语言 ,JavaScript 脚本 语言 ,Jscript 脚本 语言 ， 
< script > 标记 ,文件 包含 。 

5.3 节 : 保留 字 , 标 识 符 , 小 驼峰 命名 法 ,大 驼峰 命名 法 ,序言 性 注释 ,描述 性 注释 ,数据 
类 型 , 弱 数 据 类 型 ,变量 ,运算 符 ,表达 式 ,程序 语句 ,顺序 语句 ,分 支 语 句 ,重复 语句 ,函数 , 返 
回 值 。 
5.4 节 : 类 ,对 象 ,new 操作 ,点 运算 符 , 括 号 运算 符 ,this 指针 。 

5.5 节 : 内 置 对 象 , 字 符 串 对 象 (String) ,正则 表达 式 ,元 字符 ,限定 符 , 正 则 表达 式 对 象 
(RegExp) ,数学 对 象 (Math) ,日 期 对 象 (Date) ,数组 对 象 (Array) ,预定 义 函 数 。 

5.6 节 :浏览 器 对 象 模 型 BOM,window 对 象 ,location 对 象 ,history 对 象 ,screen 对 象 ， 
navigator 对 象 。 

5.7 节 : HTML 文档 对 象 模 型 DOM, document 对 象 ,body 对 象 , HTML 元 素 内 存 
对 象 。 

5.8 节 : AJAX 技 术 , 客 户 端 和 服务 器 的 异步 通信 ,页 面 局 部 刷新 。 

5. 9 节 : JavaScript 库 ,Prototype 库 ,jQuery 库 .jQuery 函数 ,jQuery 插件 。 

5. 10 节 : 折 司 式 菜单 , 树 状 菜单 ,数据 有 效 性 验证 。 
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5.1 计算 机 程序 与 程序 设计 语言 


人 们 使 用 计算 机 ,确切 地 讲 , 是 使 用 计算 机 软件 。 计算机 软件 , 即 是 计算 机 程序 。 在 信 
息 社 会 ,程序 不 应 该 是 一 个 深奥 的 专业 术语 , 随 着 软件 集成 开发 环境 的 发 展 ,编程 也 不 再 是 
计算 机 专业 人 员 的 专利 ,程序 应 该 是 信息 社会 人 们 基本 信息 素养 的 一 部 分 。 


5.1.1 计算 机 程序 设计 语言 


从 专业 的 角度 讲 , 计 算 机 程序 是 一 组 可 以 在 计算 机 CPU 中 执行 的 计算 机 指令 序列 。 
计算 机 程序 设计 语言 是 用 于 编写 计算 机 程序 的 语言 。 计 算 机 程序 设计 语言 很 多 ,但 程序 设 
计 语 言 的 基本 成 分 都 是 相似 的 ,主要 包括 : 四 基本 符号 ,定义 语言 所 使 用 的 字符 集 、 保 留 字 、 
标识 符 ,注释 等 ; @ 数 据 和 数据 类 型 ,对 程序 所 处 理 的 数据 的 描述 ; @@ 常 量 和 变量 ,声明 程 
序 中 用 到 的 存储 数据 的 量 ; @ 表 达 式 和 运算 符 ,数据 运算 规则 ; 加 基本 语句 ,进行 数据 处 理 
和 流程 控制 ,表达 业务 迎 辑 ; @ 函 数 , 实 现 模 块 化 和 结构 化 编程 。 

对 于 程序 设计 语言 ,可 以 从 不 同 的 方面 进行 分 类 。 按 照 语言 级 别 可 以 分 为 低级 语言 和 
高 级 语言 。@ 低 级 语言 与 特定 的 计算 机 有 关 、 运 行 效率 高 ,但 使 用 复杂 ,低级 语言 有 机 器 语 
言 和 汇编 语言 。 机 器 语言 是 基于 机 器 基本 指令 集 的 ,或 者 是 操作 码 经 过 符号 化 的 基本 指令 
集 。 汇 编 语言 是 机 器 语言 中 地 址 部 分 符号 化 的 结果 。 加 高 级 语言 ,是 一 种 更 加 符号 化 的 语 
言 ,接近 于 自然 语言 ,与 计算 机 硬件 没有 紧密 关系 。 

按 编 程 思想 分 ,计算 机 程序 分 为 过 程式 程序 设计 语言 和 面向 对 象 程序 设计 语言 。 过 程 
式 程序 设计 流行 于 20 世纪 90 年 代 以 前 , 自 项 向 下 逐步 求 精 的 结构 化 程序 设计 是 软件 开发 
的 主要 方法 ,直到 现在 ,这 种 结构 化 的 程序 设计 思想 仍然 被 广泛 采用 。Pascal, C, Basic， 
Fortran 等 高 级 语言 很 好 地 实现 了 结构 化 编程 的 思想 ,通过 过 程 和 函数 (又 称 子 程序 ) ,把 一 
个 复杂 的 问题 划分 成 若干 相对 简单 的 子 问题 ,如 果子 问题 还 比较 复杂 ,再 继续 划分 ,最 后 将 
划分 后 的 每 个 小 问题 编码 成 一 个 个 的 过 程 和 函数 ,它们 共同 构成 一 个 大 的 软件 。 

20 世纪 90 年 代 ,面向 对 象 技术 兴起 ,对 人 们 近 半 个 世纪 来 的 软件 开发 思想 产生 了 深刻 
变革 。 面 向 对 象 的 思想 将 自然 界 中 的 物理 对 象 映射 为 软件 中 的 软件 对 象 , 建 立 了 类 和 对 象 
的 概念 。 在 面向 对 象 技术 中 ,不仅 用 对 象 实现 了 数据 和 操作 的 封装 ,还 通过 消息 映射 的 方式 
在 事件 和 函数 之 间 建 立 关联 ,避免 了 传统 过 程式 程序 设计 中 函数 显 式 调用 的 不 足 。 键盘 鼠 
标 等 事件 的 发 生 会 发 出 消息 ,消息 来 激活 函数 ,函数 之 间 的 联系 不 再 是 显 式 的 调用 ,这 样 就 
降低 了 函数 之 间 的 耦合 度 。 对 于 复杂 系统 ,面向 对 象 技术 可 以 提高 系统 的 可 扩充 性 和 代码 
重用 的 层次 。 当 前 流行 的 C++ ,Java 都 是 典型 的 面向 对 象 程序 设计 语言 。 


S.1.2 程序 开发 及 其 运行 


用 计算 机 程序 设计 语言 编写 的 程序 称 为 源 程 序 , 程 序 的 执行 分 为 解释 执行 和 编译 后 执 
行 两 大 类 。 解 释 执行 就 是 在 某 个 环境 下 逐条 执行 程序 语句 , 当 遇 到 程序 错误 时 , 则 可 能 停止 
运行 。 目 前 ,网 页 中 的 客户 端 脚本 程序 就 是 由 Web 浏览 器 中 的 脚本 引擎 解释 执行 的 。 编 译 
型 程序 则 是 将 源 程 序 转换 成 可 在 CPU 中 运行 的 机 器 指令 ,通过 操作 系统 调用 来 执行 。 

对 于 编译 型 程序 ,需要 经 过 源 程 序 编译 、 连 接 才 能 形成 一 个 可 在 计算 机 操作 系统 上 运行 

















的 可 执行 文件 。 这 个 可 执行 文件 被 安装 在 计算 机 中 ,运行 该 程序 ,操作 系统 将 把 可 执行 程序 
文件 调 入 计算 机 内 存 ,在 操作 系统 的 调度 下 执行 。 编 译 型 程序 是 计算 机 程序 的 主要 形式 , 程 
序 开发 过 程 如 图 5-1 所 示 。 
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图 5-1 编译 型 计算 机 程序 开发 过 程 


编程 人 员 利 用 开发 工具 (如 Visual C++ ,MyEclipse 等 ) 来 编写 程序 , 即 源 程序 。 然 后 对 
源 程序 进行 编译 .连接 操作 ,最终 形 成 一 个 可 执行 文件 。 可 执行 文件 (Executable File) 指 的 
是 可 以 由 操作 系统 进行 加 载 执 行 的 文件 。 在 不 同 的 操作 系统 环境 下 ,可 执行 程序 的 呈现 方 
式 不 一 样 。 在 Windows 操作 系统 下 ,可 执行 程序 可 以 是 . exe 文件 、. com 等 类 型 文件 。 在 
Linux 中 的 可 执行 文件 格式 为 ELF(Executable and Linkable Format) ,在 Mac OS 中 的 可 
执行 文件 格式 为 Mach-O 即 Mach Object 格式 。 

编译 型 程序 一 直 是 计算 机 软件 开发 的 主流 模式 ,我 们 生活 中 见 到 的 大 多 数 软件 系统 都 
是 上 述 开发 过 程 的 结果 。 直 到 Web 出 现 ,一 种 基于 Web 服务 的 程序 开发 和 运行 模式 , 即 浏 
览 器 /服务 器 (Browser/Server,B/S) 模 式 开 始 出 现 并 被 广泛 应 用 。B/S 模式 表现 出 了 更 大 
的 灵活 性 ,从 此 基于 Web 的 软件 开发 开始 成 为 程序 设计 和 应 用 的 主流 。 


5.2 浏览 器 与 客户 端 脚本 程序 


在 互联 网 中 , Web 浏览 器 是 一 种 专门 用 于 网 页 浏览 的 程序 。 用户 在 浏览 器 地 址 栏 中 输 
入 网 址 ,或 在 某 个 网 页 上 单 击 一 个 超 链接 时 ,浏览 器 将 和 相应 的 Web 服务 器 建立 联系 ,发 送 
网 址 给 服务 器 ,服务 器 将 网 页 文件 发 送 给 用 户 浏览 器 ,文件 在 浏览 器 中 打开 并 显示 。 浏 览 器 
在 对 网 页 内 容 进 行 显示 的 同时 ,如 果 遇 到 客户 端 脚 本 程序 ,浏览 器 则 执行 脚本 程序 。 


5.2.1 客户 端 脚 本 程序 与 脚本 引擎 


所 谓 客户 端 脚本 程序 ,是 指 在 客户 浏览 器 中 运行 的 程序 。 客 户 端 脚本 程序 不 需要 事先 
编译 ,如 果 浏 览 器 从 服务 器 上 下 载 的 网 页 中 包含 客户 端 脚本 程序 ,浏览 器 将 对 脚本 程序 代码 
进行 解释 执行 。 浏 览 器 之 所 以 能 够 解释 执行 网 页 中 的 客户 端 脚本 程序 ,是 因为 浏览 器 中 内 
置 了 脚本 引 敬 模块 ,从 而 可 以 对 HTML 文档 中 的 脚本 程序 进行 分 析 、 识 别 、 解 释 并 执行 。 
客户 端 脚本 程序 通常 是 用 脚本 程序 语言 书写 的 ,脚本 程序 语言 和 传统 的 编译 型 程序 设 
计 语言 (如 C/C++ ,Java 等 ) 相 比 ,在 语法 结构 上 类 似 ,最 大 的 不 同 是 脚本 程序 不 需要 编译 、 
连接 过 程 , 即 不 生成 在 操作 系统 下 运行 的 可 执行 文件 ,而 是 直接 在 浏览 器 中 ,被 浏览 器 解释 
执行 。 在 解释 执行 过 程 中 ,如 果 程序 存在 错误 ,浏览 器 即 停止 程序 的 执行 ,并 在 浏览 器 窗口 
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的 状态 栏 中 显示 “网 页 存在 错误 ”的 提示 。 

由 于 安全 方面 的 原因 ,在 浏览 器 设置 中 ,可 以 使 浏览 器 禁止 脚本 程序 的 运行 。 例 如 ,在 
I 下 浏览 器 的 “Internet 选项 "对话 框 中 ,包含 “安全 ”选项 卡 ,打开 “ 自 定义 级 别 ”, 在 安全 设置 
列表 中 ,可 以 在 “活动 脚本 "中 选择 “禁用 “启用 "或 “提示 ”。 如 果 选 择 “ 禁 用 ”, 则 浏览 器 在 打 
开 网 页 时 将 不 执行 网 页 中 的 客户 端 脚本 程序 。 


S.2.2 客户 端 脚本 语言 


在 Web 发 展 早期 ,用 户 提交 一 个 表单 .为 了 保证 数据 输入 正确 ,浏览 器 和 服务 器 之 间 可 
能 需要 进行 多 次 交互 。 在 网 络 速度 很 低 的 时 代 ,这 是 不 可 接受 的 。 人 们 自然 想到 的 是 ,在 数 
据 提交 以 前 ,对 用 户 输入 进行 有 效 性 验证 , 即 可 解决 该 问题 。 

1995 年 末 , 网 景 公司 (Netscape) 0 发 布 了 导航 者 浏览 器 Navigator 2.0, 首 次 设计 实现 了 
浏览 器 脚本 程序 语言 ,这 样 数据 有 效 性 验证 的 问题 就 可 以 在 客户 端 解决 了 。 由 于 当时 和 
Sun 公司 开展 合作 ,加 之 当时 Java 技术 的 流行 , Netscape 将 其 客户 端 脚本 语言 命名 为 
JavaScript。 它 是 一 种 直译 式 脚本 语言 ,用 于 在 HTML 网 页 上 使 用 ,从 而 为 HTML 网 页 增 
加 了 编程 功能 ,其 解释 器 称 为 JavaScript 引擎 ,为 浏览 器 的 一 部 分 。 

随后 ,为 了 取得 技术 优势 ,微软 推出 了 JScript,CEnvi 推出 ScriptEase, 与 JavaScript 一 
样 可 以 在 浏览 器 上 和 运行。 发 展 初期 ,JavaScript 的 标准 并 未 确定 ,同期 有 Netscape 的 
JavaScript ,微软 的 JScript 和 CEnvi 的 ScriptEase 三 足 易 立 。1997 年 ,在 ECMA( 欧 洲 计算 
机 制造 商 协 会 ) 的 协调 下 , 由 Netscape、Sun、 微 软 、 Borland 多 家 公司 组 成 工作 组 ,在 
JavaScript 基础 上 制定 了 脚本 语言 标准 , 称 为 ECMAScript。 

1. 脚本 语言 的 组 成 

在 ECMAScript 标准 中 ,规定 了 脚本 语言 的 基本 组 成 ,包括 三 个 部 分 : 

(1) 语言 语法 和 基本 对 象 ,这 是 一 门 程序 设计 语言 的 基本 组 成 部 分 ,包括 : 语法 、 类 型 、 
语句 .关键 字 、 保 留 字 运算 符 、 内 置 对 象 等 。 

(2) 文档 对 象 模型 (DOM) ,描述 处 理 网 页 内 容 的 方法 和 接口 。 对 于 网 页 中 的 每 一 个 标 
记 , 浏 览 器 都 为 其 在 内 存 中 创建 一 个 对 象 ,通过 DOM 编程 来 实现 对 网 页 的 交互 控制 。 

(3) 浏览 器 对 象 模型 (BOM) ,描述 与 浏览 器 进行 交互 的 方法 和 接口 ,实现 在 客户 端 脚 
本 程序 中 对 浏览 器 的 访问 和 控制 。 

ECMAScript 不 与 任何 具体 浏览 器 绑 定 , 它 只 是 描述 了 有 关 脚 本 程序 语言 所 具有 的 通 
用 属性 ,这 些 具体 内 容 需 要 由 具体 的 浏览 器 实现 。 

目前 ,在 Web 浏览 器 中 ,主要 的 客户 端 脚本 语言 有 JavaScript 和 JScript, 其 中 ， 
JavaScript 是 最 早 的 客户 端 脚本 语言 ,是 浏览 器 默认 的 脚本 程序 语言 。 不 同 的 浏览 器 对 脚 
本 语言 的 实现 不 完全 一 样 ,这 就 导致 同样 的 网 页 在 不 同 的 浏览 器 中 打开 的 效果 可 能 不 同 。 

2. 脚本 程序 

根据 HTML 规范 ,在 网 页 中 书写 脚本 程序 ,脚本 程序 应 该 书写 在 < script >…</script > 


@ 网 景 (Netsape) ,美国 著名 浏览 器 厂商 ,1994 年 成 立 , 同 年 12 月 ,推出 第 一 款 商用 浏览 器 导航 者 (Navigator) , 创 
始 人 之 一 就 是 马克 。 安德森 (Marc Andreessen) 。 在 微软 进军 浏览 器 市 场 以 前 ,其 市 场 份额 一 度 达 到 90% ,1998 年 11 月 
24 日 ,AOL 收购 网 景 ,后 来 导航 者 (Navigator) 浏 览 器 逐步 淡出 市 场 。 


标记 对 内 。 在 网 页 中 包含 脚本 程序 的 一 般 形式 是 : 

< Script type=" "> 

语句 部 分 

</script > 

Script 标记 包括 一 个 必 选 属性 type 和 若干 可 选 属性 。 必 选 属性 type 规定 脚本 的 
MIME 类 型 (Multipurpose Internet Mail Extensions, 多 用 途 互 联网 邮件 扩展 ) , 它 是 设 定 某 
种 扩展 名 的 文件 用 一 种 应 用 程序 来 打开 的 方式 类 型 , 当 该 扩展 名 文件 被 访问 的 时 候 , 浏 览 器 
会 自动 使 用 指定 应 用 程序 来 打开 ,多 用 于 指定 一 些 客户 端 自 定义 的 文件 名 ,以 及 一 些 媒体 文 
件 打 开 方式 。 对 于 JavaScript 来 讲 , 其 MIME 类 型 为 "text/javascript”。 

Script 标记 还 包括 若干 可 选 属性 ,例如 : language 属性 (用 于 设 定 脚本 程序 语言 ,也 可 
以 包含 版 本 号 。 一 般 不 设 , 由 type 属性 设 定 ) ,src 属性 (外 部 脚本 文件 URL) ,charset 属性 
(外 部 脚本 文件 中 使 用 的 字符 编码 ) ,defer 属性 (是 否 对 脚本 执行 进行 延迟 ,直到 页 面 加 载 为 
止 ) 等 。 

与 传统 的 程序 设计 一 样 ,在 JavaScript 编程 中 ,也 可 以 将 一 些 公用 的 函数 保存 为 独立 的 
文件 (扩展 名 为 .js) ,然后 在 其 他 网 页 的 头 部 (< head ></head >) ,把 其 他 JavaScript 文件 包 
含 进来 ,一 般 形式 是 : 


<script src = "脚本 文件 url"></script > 


脚本 程序 可 以 出 现在 网 页 的 头 部 ,也 可 以 出 现在 网 页 的 文档 体 中 ,其 中 出 现在 文档 头 部 
的 脚本 程序 通常 是 一 些 函数 ,这些 函数 只 有 在 显 式 地 调用 时 才 被 执行 。 在 介绍 具体 的 客户 
端 脚本 程序 设计 以 前 , 先 看 两 个 包含 JavaScript 客户 端 脚本 程序 的 简单 网 页 示例 。 

【 例 5-1】 编写 一 段 脚 本 程序 ,检测 所 用 Web 浏览 器 对 JavaScript 脚本 程序 的 支持 
情况 。 

说 明 ; 不 同 的 浏览 器 对 脚本 程序 的 支持 情况 不 同 ,下 述 代码 可 以 检测 浏览 器 对 
JavaScript 脚本 程序 不 同 版 本 的 支持 情况 。 

用 Sublime Text 代码 编辑 器 编辑 HTML 代码 ,代码 清单 如 下 : 

代码 清单 (exa5-1. htm) : 





<! DOCTYPE html > 
<html> 
<head> 
<meta charset = "utf - 8"> 
</head> 
<body> 
<hl > JavaScript 检测 </hl >< hr > 
<! -- JavaScript 支持 性 检测 -一 > 
< script type = "text/javascript"> 
document. write(" 浏 览 器 支持 JavaScript!<br><br>"); 

</script> 
<! -- JavaScript 版 本 检测 -一 > 
< Script type = "text/javascript1.0"> 

document.write( "浏览 器 支持 JavaScript 1.0<br>"); 
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</script > 
< script type = "text/javascript1.1"> 

document.write( "浏览 器 支持 JavaScript 1.1<br>"); 
</script> 


< script type = "text/javascript1.5"> 
document. write(" 浏 览 器 支持 JavaScript 1.5<br>"); 
</script> 


</body> 
</html > 


分 别 使 用 IE10.0、Maxthon( 邀 游 )、Mozilla Firefox 和 GoogleChrome 浏览 器 中 打开 上 
述 网 页 文件 exa5-1. htm, 在 IE 10.0 和 Maxthon ( 邀 游 ) 浏览 器 中 , 显示 浏览 器 支持 
JavaScript 1.1/1.2/1.3, 因 为 Maxthon 浏览 器 采用 了 IE 内 核 , 因 此 ,两 者 对 于 JavaScript 
版 本 的 支持 一 致 。 在 Mozilla FireFox 2.0 浏览 器 中 ,显示 浏览 器 支持 JavaScript 1.0 到 
JavaScript 1. 5 的 全 部 Javascript 版 本 。 而 GoogleChrome 浏览 器 只 支持 JavaScriptl. 1/ 
ly2/l3s 

与 所 有 的 软件 开发 一 样 , Web 页 面 中 的 程序 也 需要 对 程序 进行 结构 化 设计 。 在 
JavaScript 中 ,同样 提供 了 函数 定义 与 函数 调用 功能 ,以 支持 结构 化 程序 设计 。 由 于 浏览 器 
浏览 的 Web 页 是 顺序 地 从 Web 服务 器 调 出 ,并 由 浏览 器 解释 执行 的 ,因此 函数 必须 遵循 先 
定义 (一 般 放 在 < head >…</head >) 后 调用 (在 < body >…</body > 内 ) 的 原则 。 

【 例 5-2】 编写 一 个 JavaScript 函数 , 求 一 个 正 整 数 n 的 阶乘 。 

说 明 : 模块 化 编程 同样 适用 于 脚本 程序 ,函数 可 以 写 在 HTML 页 面 的 任何 位 置 ,从 良 
好 的 编程 习惯 上 讲 ,函数 定义 通常 写 在 < head ></head > 中 。 

代码 清单 (exa5-2. htm) : 

<! DOCTYPE html > 

<html> 

<head> 

<meta charset = "utf - 8"> 

< script type = "text/javascript"> 


function fact(n) 


{ 


if (n==0) 
return 1; 
else 


return nx fact(n— 1); 
} 
</script > 
</head> 
<body> 
<p>fact(5) = 
< script type = "text/javascript"> 
document. write( fact(5)); 


</script > 
</body> 
</html > 


在 浏览 器 中 打开 上 述 网 页 文件 ,在 浏览 器 中 显示 : fact(5) 二 120。 

JavaScript 程序 和 一 般 的 编译 型 程序 不 同 , 它 没有 一 个 操作 系统 调用 的 主 程序 (如 C 语 
言 中 的 main 函数 ) ,一 个 JavaScript 函数 定义 时 并 不 发 生 作 用 ,只 有 在 引用 时 (函数 定义 后 
的 document. write 语句 ) 才 被 激活 。 

不 同 的 浏览 器 和 浏览 器 版 本 ,支持 的 脚本 语言 版 本 也 不 相同 。 因 此 ,在 书写 客户 端 脚本 
程序 时 ,应 该 根据 浏览 器 的 种 类 和 版 本 ,使 用 合适 的 内 置 对 象 和 浏览 器 对 象 ,否则 ,如 果 程 序 
中 使 用 了 一 些 高 版 本 脚本 语言 包含 的 对 象 , 则 网 页 在 不 支持 该 版 本 的 浏览 器 中 ,或 低 版 本 的 
浏览 器 中 可 能 不 能 正常 显示 。 


5.3 JavaScript 程序 设计 基础 


在 为 数 不 多 的 客户 端 脚本 语言 中 ,JavaScript 脚本 语言 是 使 用 最 为 广泛 的 客户 端 脚本 
程序 设计 语言 ,得 到 了 所 有 浏览 器 的 支持 ,是 各 种 浏览 器 首选 的 默认 脚本 程序 语言 。 与 传统 
的 C/C++ 、Java 等 程序 设计 语言 不 同 , 作 为 脚本 语言 ,JavaScript 的 特点 是 : 四 是 一 种 弱 类 
型 的 语言 ,对 使 用 的 数据 类 型 未 做 出 严格 要 求 ,语法 类 似 C/C++ 和 Java 语言 ,语言 简单 。 
@ 是 一 种 基于 对 象 的 脚本 语言 , 它 不 仅 可 以 创建 对 象 ,还 定义 了 一 系列 内 置 对 象 。@ 采 用 事 
件 驱 动 方式 ,使 客户 端 具 有 强大 的 编程 能 力 。@ 跨 平台 性 ,因为 JavaScript 脚本 程序 在 浏览 
器 中 执行 ,所 以 不 依赖 于 操作 系统 ,具有 跨 平台 性 和 良好 的 兼容 性 。 


5.3.1 JavaScript 基本 符号 


任何 一 种 程序 设计 语言 都 有 其 自身 的 字符 集 和 基本 符号 ,它们 按照 程序 设计 语言 的 语 
法 构成 程序 语句 ,然后 语句 再 构成 程序 。 

1. 基本 字符 

JavaScript 的 基本 字符 有 字母 (a、b、…、z,A、B、…、2Z) 数 字 (0、1、…、9) 和 特殊 符号 (十 、 
一 、* 、 /< 一 > 等 ) 三 大 类 。 

同 C/C++ 一 样 ,JavaScript 中 同样 有 些 以 反 斜 杠 (\) 开 头 来 表示 不 可 显示 的 特殊 字符 ， 
通常 称 为 控制 字符 ,例如 :"\n' 表 示 换 行 (nextline,\13).\r' 表 示 回 车 (return,\10)。 因 为 所 
有 的 ASCII 码 都 可 以 用 “\” 加 数字 (一 般 是 八进制 数字 ) 来 表示 。 在 C 等 计算 机 语言 中 , 定 
义 了 一 些 字母 前 加 “\” 来 表示 那些 不 能 显示 的 ASCII 字符 ,如 :\0,\t,\n,\r 等 ,因为 后 面 的 
字符 不 再 是 它 本 来 的 ASCII 字符 的 意思 了 , 故 称 转 义 字符 。 

2. 关键 字 

关键 字 又 称 为 保留 字 , 它 是 由 字母 构成 的 具有 固定 含义 的 单词 ,如 var 代表 变量 说 明 ,if 
表示 条 件 语句 等 。JavaScript 的 关键 字 很 多 ,可 以 参考 JavaScript 的 专门 书籍 。 

需要 特别 注意 的 是 ,JavaScript 是 识别 大 小 写 的 ,在 JavaScript 中 ,关键 字 需 要 小 写 , 如 
果 书 写 有 误 , 在 打开 网 页 时 ,在 浏览 器 窗口 状态 栏 将 显示 “JavaScript 脚本 错误 ”的 警告 。 
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3. 标识 符 

表示 常量 .变量 .类 型 和 函数 等 名 称 的 符号 。 标 识 符 分 为 标准 标识 符 和 用 户 自 定义 标识 
符 。 标 准 标识 符 是 表示 标准 常量 .标准 类 型 和 标准 函数 等 名 称 的 符号 。JavaScript 中 的 标 
准 常量 和 标准 函数 见 后 续 章 节 的 介绍 。 

用 户 自 定义 标识 符 是 指 用 于 说 明 常 量 、 变 量 、 类 型 和 函数 等 名 称 的 符号 。 用 户 自 定 义 标 
识 符 必 须 以 字母 开始 ,由 任意 的 字母 .数字 和 ” ”组 成 。 用 户 在 命名 标识 符 时 应 该 有 一 定 的 
命名 规范 : 首先 ,用 户 自 定义 标识 符 不 应 该 与 标准 标识 符 重 名 。 第 二 ,用 户 自 定 义 标识 符 要 
尽 可 能 反映 它 所 代表 对 象 的 含义 。 如 用 Name 代表 名 称 比 用 x 代表 名 称 可 读 性 更 强 。 第 
三 ,如 果 是 一 个 变量 名 ,还 应 该 尽 可 能 反映 变量 的 数据 类 型 和 作用 域 ,比如 用 nUserID 表示 
一 个 用 户 标识 ,最 前 面 的 小 写字 母 n 代表 变量 为 整数 类 型 。 总 之 ,好 的 命名 规范 可 以 提高 程 
序 的 可 读 性 ,便于 程序 的 维护 。 

目前 常用 的 标识 符 命名 法 有 小 驼峰 命名 法 和 大 驼峰 命名 法 ,所谓 小 驼峰 命名 法 ,就 是 第 
一 个 单词 的 首 字 母 小 写 , 其 他 单词 首 字母 大 写 , 例 如: int myUserAccount。 大 了 驼峰 命名 就 
是 所 有 单词 首 字母 均 大 写 ,例如 : public class UserAccount。 

4. 注释 

为 了 增加 程序 的 可 读 性 ,一 般 在 程序 中 增加 注释 语句 ,注释 内 容 没 有 语法 要 求 , 其 内 容 
仅仅 是 一 个 提示 作用 。 注 释 一 般 分 为 序言 性 注释 和 描述 性 注释 两 种 类 型 。 序 言 性 注释 出 
现在 模块 的 首部 ,其 内 容 一 般 包括 有 关 模 块 功能 的 说 明 , 界 面 描述 ,包括 调用 语句 格式 、 
所 有 参数 的 解释 和 该 模块 需 调 用 的 其 他 模块 名 等 。 还 包括 一 些 重 要 变量 的 使 用 .限制 及 
其 他 信息 。 描 述 性 注释 柑 在 程序 之 中 ,描述 性 注释 又 有 功能 性 的 和 状态 性 的 ,功能 性 注 
释 说 明 程序 段 的 功能 ,通常 可 放 在 程序 段 之 前 ,状态 性 注释 说 明 数 据 的 状态 ,通常 可 放 在 
程序 段 之 后 。 

在 JavaScript 中 ,注释 以 "//] 字符 引导 ,注释 可 以 单独 一 行 ,也 可 以 在 语句 行 的 后 面 。 
与 HTML 的 注释 (<! 一 …. ->) 不 同 , 在 服务 器 端 处 理 脚 本 时 ,JavaScript 中 注释 将 被 删除 ， 
而 不 是 被 送 到 浏览 器 端 。 若 需要 客户 端 浏览 器 看 到 脚本 中 的 注释 ,应 该 使 用 HTML 注释 
将 注释 加 进 HTML 页 。 此 时 ,注释 将 返回 给 浏览 器 。 


5.3.2 数据 和 数据 类 型 


在 程序 设计 中 ,所谓 “ 数 据 类 型 ”, 就 是 定义 一 段 计算 机 内 存 空 间 的 解析 规则 ,说明 变 量 
就 是 要 说 明 变 量 名 称 及 其 数据 类 型 。 数 据 类 型 决定 了 变量 所 占 内 存 空间 的 大 小 ,同时 也 决 
定 了 变量 的 取 值 范围 。 对 于 程序 中 声明 的 全 局 变量 ,程序 在 运行 时 ,操作 系统 会 为 其 分 配 空 
间 。 直 到 程序 运行 结束 ,所 占用 的 内 存 空间 被 释放 。 

JavaScript 是 一 种 解释 性 的 程序 设计 语言 ,所 写 的 脚本 程序 不 需要 编译 和 链接 , 它 采 用 
边 读 边 执行 的 方式 运行 。 在 数据 类 型 方面 ,JavaScript 提供 了 4 种 基本 的 数据 类 型 用 来 处 
理 数字 和 文本 。JavaScript 提供 的 数据 类 型 有 : 数值 (整数 和 实数 ) .字符 串 型 (用 西 文 双 引 
号 “"” 或 西 文 单 引 号 “'” 括 起 来 的 字符 ) ,布尔 型 (true 和 false, 均 为 小 写 ) 。 

与 传统 的 编译 型 程序 设计 语言 不 同 ,JavaScript 语言 中 采用 弱 类 型 的 变量 类 型 ,没有 预 
定义 的 类 型 名 ,变量 不 必 事 先 声 明 其 数据 类 型 ,可 以 在 使 用 或 赋值 时 确定 其 数据 类 型 。 此 
外 ,一 个 变量 的 类 型 在 使 用 时 还 可 以 被 改变 。 通 常情 况 下 ,可 以 先 给 变量 赋 一 个 初 值 ,通过 





初 值 的 类 型 来 声明 该 变量 的 数据 类 型 .这 更 加 符合 一 般 的 程序 设计 思想 ,例如 : 


var x = "hello"; 


上 述 语句 声明 了 一 个 变量 x, 通 过 为 x 赋 初 值 "hello" ,将 x 作为 一 个 字符 串 类 型 变量 。 
在 后 面 的 语句 中 ,可 以 给 x 赋 一 个 整数 ,如 : x 二 100, 这 样 变量 x 就 成 为 整数 类 型 了 。 在 
JavaScript 中 ,上 述 变 量 类 型 的 改变 不 会 和 其 他 程序 设计 语言 一 样 出 现 赋值 不 相 容 的 错误 。 

不 同 的 数据 类 型 之 间 可 以 进行 转换 ,例如 : 将 字符 串 转换 为 相应 的 整数 ,将 整数 转换 为 
字符 串 数据 等 。 这 些 转 换 被 封装 在 相应 的 类 或 对 象 中 ,字符 串 到 数值 的 转换 函数 可 见 
String 对 象 。 如 果 是 数值 型 转换 为 字符 串 , 最 简单 的 方法 就 是 将 一 个 字符 串 和 数值 做 “十 ” 
运算 ,结果 即 为 字符 串 类 型 ,例如 : 

var age= 18; 

var agestr = age* 2+""; 

上 述 代 码 ,第 一 个 语句 设置 age 为 整数 ,第 二 个 语句 agestr 则 为 字符 串 。 通 过 整数 和 一 
个 字符 串 , 例 如 空 串 相 加 , 即 可 得 到 一 个 字符 串 数据 。 


5.3.3 常量 和 变量 


程序 是 对 数据 的 处 理 ,数据 是 通过 常量 和 变量 来 表达 的 。 一 般 情况 下 ,系统 不 为 常量 分 
配 内 存 空间 。 而 变量 在 内 存 中 则 需要 占据 特定 大 小 的 存储 空间 ,在 程序 运行 过 程 中 ,通过 变 
量 赋值 可 以 修改 变量 空间 内 存储 的 数值 。 

1. 常量 和 常量 定义 

常量 是 指 在 程序 执行 过 程 中 ,其 值 不 发 生变 化 的 量 。 常 量 有 字面 常量 和 符号 常量 两 种 。 
字面 常量 就 是 一 些 数 值 或 字符 串 , 例 如: 3. 14,"hello" 等 都 是 字面 常量 。 根 据 数据 类 型 的 不 
同 ,常量 可 分 为 整数 常量 .实数 常量 .字符 常量 等 。 符 号 常量 是 指 为 一 个 常量 起 一 个 名 字 , 即 
常量 名 ,常量 名 是 一 个 用 户 自 定义 标识 符 。 例 如 : 用 pi 代表 圆周 率 3. 14 。 

常量 命名 有 两 方面 的 好 处 ,首先 恰当 的 常量 名 称 可 以 增加 程序 的 可 读 性 ; 其 次 ,使 用 常 
量 名 可 以 便于 程序 的 维护 。 例 如 ,可 以 命名 常量 pi 二 3. 14, 如 果 和 希望 提高 求解 精度 ,可 以 修 
改 pi 的 定义 为 pi 二 3.1416, 这 种 修改 只 在 一 处 进行 ,不 会 产生 不 一 致 的 情况 ,而 且 修 改 
简单 。 

在 字面 常量 中 ,字符 型 常量 使 用 得 最 为 广泛 . 它 是 指使 用 单 引 号 (') 或 双 引 号 (") 括 起 来 
的 一 个 或 多 个 字符 。 如 'a'、"hello"、"5123"、"x 十 y" 等 ,其 中 单 引号 括 起 来 的 只 能 是 单个 字 
符 , 双 引号 括 起 来 的 为 字符 串 ,可 以 是 单个 字符 ,也 可 以 是 多 个 字符 。 

2. 变量 和 变量 说 明 

所 谓 * 变 量 ? 是 指 在 程序 执行 过 程 中 ,其 值 发 生变 化 的 量 。 每 一 个 变量 都 有 一 个 变量 名 ， 
对 应 一 个 特定 的 内 存 空间 。 变 量 有 两 个 重要 的 属性 ,一 个 是 数据 类 型 ,一 个 为 操作 运算 。 数 
据 类 型 决定 了 变量 所 占 内 存 空间 的 大 小 ,也 决定 了 数据 的 取 值 范围 和 操作 运算 。 

在 JavaScript 中 ,变量 命名 的 一 般 形式 是 : 

var < 变量 名 表 >; 


其 中 ,var 是 JavaScript 的 保留 字 ,表明 接 下 来 是 变量 说 明 ,变量 名 表 是 用 户 自 定义 标识 
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符 , 变 量 之 间 用 逗号 分 开 。 与 CVC++ 不 同 ,在 JavaScript 中 ,没有 预定 义 的 数据 类 型 标识 符 ， 
变量 说 明 不 需要 说 明 数 据 类 型 。 此 外 .变量 也 可 以 不 说 明 而 直接 使 用 。 

例如 var x,y; 则 声明 了 两 个 变量 ,名 称 分 别 为 x 和 y, 没 有 说 明 数 据 类 型 ,也 没有 给 变 
量 赋值 。 

再 如 var myName 王 "John" , 则 定义 了 一 个 变量 myName, 同 时 赋予 了 它 一 个 字符 串 
值 。 在 JavaScript 中 ,变量 可 以 不 作 声明 ,在 使 用 时 ,数据 的 类 型 将 确定 变量 的 类 型 。 

3. 变量 作用 域 

变量 作用 域 由 声明 变量 的 位 置 决定 ,决定 哪些 程序 语句 可 访问 该 变量 。 在 函数 外 部 声 
明 的 变量 称 为 全 局 变量 ,其 值 能 被 所 在 HTML 文件 中 的 任何 脚本 程序 访问 和 修改 。 在 函 
数 内 部 声明 的 变量 称 为 局 部 变量 。 局 部 变量 只 能 被 函数 内 部 的 语句 访问 ,只 对 该 函数 是 可 
见 的 ,而 在 函数 外 部 则 是 不 可 见 的 。 当 函数 被 执行 时 ,局 部 变量 被 分 配 临 时 空间 ,函数 结束 
后 ,变量 所 占据 的 内 存 空 间 被 释放 。 


5.3.4 运算 人 符 和 表达 式 


表达 式 是 指 将 常量 .变量 .函数 .运算 符 和 括号 连接 而 成 的 式 子 。 根 据 运算 结果 的 不 同 ， 
表达 式 可 分 为 算术 表达 式 ( 结 果 为 整数 或 实数 ) .字符 表达 式 ( 结 果 为 字符 或 字符 串 ) 和 逻辑 
表达 式 ( 结 果 为 逻辑 值 true 或 false) 。 

JavaScript 提供 了 丰富 的 运算 功能 ,包括 算术 运算 .关系 运算 、. 迎 辑 运算 和 连接 运算 等 。 

1. 算术 运算 符 

在 JavaScript 中 ,算术 运算 符 有 单 目 运算 符 和 双 目 运算 符 。 双 目 运 算 符 包括 : 十 (加 )、 
一 ( 减 )、x ( 乘 )、/( 整 除 )、%( 模 除 )、|( 按 位 或 )、&( 按 位 与 )、<<( 左 移 )、>>( 右 移 ) 等 。 单 
目 运 算 符 有 : 十 十 ( 自 加 1)、 一 一 ( 自 减 1) .一 ( 取 反 )、 一 ( 取 补 ) 等 。 

2. 关系 运算 符 

关系 运算 又 称 比较 运算 ,运算 符 有 : 二 (小 于 ) .二 = (小 于 等 于 )、 >( 大 于 )、 > 一 (大 于 
等 于 ) ,二 (和 等于) 和! 二 (不 等 于 )。 

关系 运算 的 运算 结果 为 布尔 值 ,如 果 条 件 成 立 , 则 结果 为 true, 否则 为 false。 

3. 逻辑 运算 符 

逻辑 运算 符 有 : &( 逻 辑 与 )、| (逻辑 或 )、!( 取 反 , 人 逻辑 非 )、“ (逻辑 异 或 ) ,运算 结果 为 布 








尔 值 。 
4. 字符 串 连 接 运 算 符 
连接 运算 用 于 字符 串 操 作 ,运算 符 为 十 (用 于 强制 连接 ) ,将 两 个 或 多 个 字符 串 连 接 为 一 
个 字符 串 。 

5. 三 目 操作 符 ?: 

三 目 操作 符 “?: ”格式 为 : 

操作 数 ?表达 式 1: 表达 式 2 


三 目 操作 符 “?:” 构 成 的 表达 式 ,其 逻辑 功能 为 : 若 操作 数 的 结果 为 true( 非 0 值 ) , 则 表 
述 式 的 结果 为 表达 式 1 ,否则 为 表达 式 2。 例 如 max 一 (a> b)? a:b; 该 语句 的 功能 就 是 将 a， 
b 中 的 较 大 的 数 赋 给 max。 


5.3.5 语句 


语句 是 对 业务 流程 的 描述 ,控制 了 程序 执行 的 流程 。 所 有 的 程序 设计 语言 ,无 论 是 过 程 
式 程序 设计 语言 还 是 面向 对 象 的 程序 设计 语言 ,其 程序 语句 都 可 以 分 为 三 种 类 型 , 即 顺序 语 
名 、 分 支 语句 和 重复 语句 ,使 用 这 三 种 语句 就 可 以 描述 用 户 的 所 有 业务 逻辑 。 

1. 顺序 语句 

从 本 质 上 讲 , 在 一 个 程序 中 ,语句 的 执行 总 是 从 上 而 下 顺序 执行 的 。 在 过 程式 程序 设计 
语言 中 ,这 种 顺序 是 程序 本 身 所 显 式 定义 的 。 例 如 ,C 语言 中 的 函数 调用 , 遇 到 函数 调用 , 转 
去 执行 相应 的 函数 ,执行 结束 后 返回 。 在 面向 对 象 的 程序 设计 语言 中 ,函数 的 调用 变 得 更 加 
复杂 , 它 是 在 程序 的 运行 过 程 中 ,由 事件 触发 消息 ,由 消息 来 激活 函数 。 这 样 的 事件 驱动 机 
制 ,使 函数 的 调用 变 得 不 再 和 过 程式 程序 设计 中 的 显 式 调用 那么 清晰 ,但 这 种 消息 影射 
(Message Map) 机 制 降低 了 函数 之 间 的 耦合 度 , 大 大 增强 了 软件 系统 的 可 维护 性 。 在 函数 
内 部 ,语句 仍然 是 从 上 向 下 顺序 执行 的 。 

无 论 是 C\C++ ,Java, 还 是 JavaScript, 由 于 语句 语法 的 需要 ,有 时 候 需 要 将 多 个 语句 看 
作 逻 辑 上 的 一 个 语句 ,此 时 需要 将 这 多 个 语句 用 一 对 花 括 号 "{” 和 *)" 括 起 来 ,语句 之 间 用 分 
号 分 开 , 称 为 语句 块 。 在 语句 块 内 部 ,语句 从 上 而 下 顺序 执行 。 

2. 分 支 结构 

在 业务 描述 中 ,有 些 业 务 的 执行 是 有 条 件 的 。 要 表达 这 样 的 业务 流程 ,在 程序 设计 语言 
中 需要 通过 分 支 语句 来 实现 。 在 JavaScript 中 ,实现 分 支 结构 的 语句 有 三 种 ,它们 是 条 件 判 
断 语句 话语 句 ,if…else… 语 句 和 开关 语句 switch 语句 。 

(1) 过 语句 

计 语 句 的 一 般 形 式 是 : 

让 (< 条 件 表达 式 > ) 

< 语句 >; 

这 语句 首先 计算 条 件 表达 式 的 值 , 若 计算 结果 为 true, 或 非 0 值 的 数 ,包括 正 数 或 负数 ， 
则 执行 语句 部 分 ,否则 执行 证 语 名 下面 的 语句 。 

i 语句 迎 辑 功能 如 图 5-2 所 示 。 

语句 部 分 逻辑 上 是 一 个 语句 ,如 果 语 句 部 分 需要 多 个 语 
句 来 实现 ,应 将 这 多 个 语句 用 “{” 和 *“)” 括 起 来 ,形成 语句 块 ， 
作为 逻辑 上 的 一 个 语句 。 






false(0 值 》 


true( 非 0 值 ) 








例如 : 

if (a>=b) 下 面 的 语句 

图 5-2 并 语 句 逻辑 功能 图 
max=a; 
min= b; 


} 


(2) if…else 语句 


第 
5 
在 需要 多 种 条 件 判断 的 业务 逻辑 中 ,用 寺 语 句 来 描述 是 麻烦 和 低 效 的 。 对 于 有 两 种 分 | 章 
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支 的 情况 ,一 般 可 以 使 用 if…else 语句 来 描述 。if…else 语句 的 一 般 形式 是 : 


二 (< 条 件 表达 式 > ) 
< 语句 1>; 

else 
< 语句 2>; 


if*…else 语句 首先 计算 条 件 表达 式 的 值 , 若 为 true, 或 非 0 值 的 数 , 则 执行 语句 1 ,和 否则， 


执行 语句 2, 人 逻辑 功能 如 图 5-3 所 示 。 
在 存在 两 种 分 支 的 情况 下 ,if…else 语句 可 以 很 好 地 ”true( 非 0 值 ) false(0 值 ) 
描述 这 种 逻辑。 在 多 种 分 支 的 情况 下 ,可 以 使 用 if…else i 











语句 的 符 套 进行 描述 ,也 就 是 说 ,语句 1 或 语句 2 本 身 也 语句 1 语句 2 
是 if…else 语句 。 语 句 艇 套 虽然 可 以 描述 多 种 分 支 的 业 
务 罗 辑 ,但 秀 套 语句 降低 了 程序 的 可 读 性 。 为 此 ,对 于 多 | 
种 分 支 的 情况 ,JavaScript 提供 了 switch 语句 。 下 面 的 语句 
(3) switeh 语句 图 5.3 feelse 语句 进 辑 功 能 图 


对 于 有 三 种 以 上 分 支 的 情况 ,采用 if…else 语句 杠 
套 降 低 了 程序 的 可 读 性 。switch 语句 提供 了 if…else 多 层 嵌 套 结构 的 一 种 变通 形式 ,可 以 
从 多 个 语句 块 中 选择 执行 其 中 的 一 个 。switch 语句 提供 的 功能 与 if…else 语句 类 似 , 但 是 
可 以 使 代码 更 加 简练 易 读 。 
switch 语句 一 般 形式 是 : 
switch (< 条 件 表达 式 >) 
{ 
case 表达 式 1 
语句 块 1; 
[break; ] 
case 表达 式 2 
语句 块 2; 
[break; ] 


case 表达 式 n 
语句 块 n; 
[break; ] 
[default: 
语句 块 n+ 1; 
] 
} 


在 switch 语句 的 开始 是 一 个 条 件 表达 式 ,该 条 件 表 达 式 可 以 是 一 个 整数 .小 数 或 字符 
串 表 达 式 。 条 件 表 达 式 的 计算 结果 将 与 结构 中 每 个 case 分 支 表 达 式 值 比较 。 如 果 匹 配 , 则 
执行 与 该 case 关联 的 语句 块 。 在 语句 块 中 ,如 果 包 含 break 语句 ,此 时 , 则 退出 switch 语 
句 , 否 则 ,将 继续 下 面 的 case 匹配 。switch 语句 的 逻辑 功能 如 图 5-4 所 示 。 其 中 虚线 或 框 为 
可 选 语句 及 流程 。 

3. 重复 结构 

在 业务 流程 中 ,有 些 部 分 是 需要 反复 执行 的 。 这 需要 通过 程序 设计 语言 中 的 重复 语句 













条 件 表达 式 





语句 块 1 


EE 
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语句 块 2 
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语句 块 n 


i 
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下 面 的 语句 
图 5-4 switch 语句 逻辑 功能 图 


来 描述 。 重 复 语句 总 是 由 循环 体 和 循环 终止 条 件 两 部 分 组 成 ,在 JavaScript 中 有 三 种 形式 
的 重复 语句 。 
(1) while 语句 
while 语句 是 先 判断 循环 终止 条 件 ,然后 再 执行 循环 体 , 因 此 循环 体 可 能 一 次 也 不 被 执 
行 。while 语句 的 一 般 形 式 是 : 
while (< 条 件 表 达 式 >) 
< 语句 >; 
首先 计算 条 件 表达 式 的 值 ,车 计算 结果 为 true, 或 非 0 的 数 , 则 执行 循环 体 语句 ,然后 无 
条 件 地 返回 while 语句 开始 ,继续 计算 条 件 表达 式 的 值 。 如 
果 条 件 表达 式 计算 的 结果 为 false, 则 结束 循环 ,执行 while 
循环 语句 下 面 的 语句 。 逻 辑 功 能 如 图 5-5 所 示 。 
(2) do…while 语句 
与 while 语句 相似 ,不 同 的 是 do… while 先 执行 循环 
体 , 然 后 再 判断 循环 终止 条 件 。 因 此 循环 体 至 少 执行 一 次 。 
do…while 语句 的 一 般 形式 是 : 
dof 
< 语句 > 图 5-5 ”while 语句 逻辑 功能 图 
}while (< 条 件 表达 式 >) ; 


首先 执行 循环 体 , 然 后 计算 条 件 表达 式 的 值 , 若 计 算 结果 为 true, 或 非 0 的 数 ,然后 无 条 


件 地 返回 do…while 语句 开始 ,继续 执行 循环 体 。 直 到 条 件 表达 式 计算 的 结果 为 false, 则 结 
束 循环 。 逻辑 功 能 如 图 5-6 所 示 。 







false(0 值 ) 


true( 非 0 值 ) 


下 面 的 语句 
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(3) for 语句 
for (表达 式 1; 表达 式 2; 表达 式 3) 
< 语句 >; 
执行 过 程 如 下 : 
Stepl: 计算 表达 式 1。 
Step2: 计算 表达 式 2, 如 果 结 果 为 true, 或 非 0 值 , 则 执行 循环 体 ,然后 转 Step3。 否 则 ， 
Step3: 计算 表达 式 3。 
Step4: 无 条 件 转 Step2。 
Step5: 循环 结束 ,执行 for 语句 下 面 的 语句 。 
逻辑 功能 如 图 5-7 所 示 。 







表达 式 1 


false(0 值 ) 





< | 


F 面 的 语句 F 面 的 语句 
图 5-6 do…while 语句 逻辑 功能 图 图 5-7 ”for 语句 逻辑 功能 图 





表达 式 3 


在 for 语句 中 ,表达 式 1 表达 式 2 和 表达 式 3 中 可 以 省 略 其 中 的 一 个 或 多 个 ,但 它们 之 
间 的 分 号 不 能 省 略 。 例 如 ,可 以 写 下 面 的 for 语 句 形式 : 
for (; ;) 


{ 


} 

上 述 for 语句 是 一 个 死 循环 ,在 循环 体 中 必须 包含 break 语句 ,以 结束 循环 的 执行 。 另 
外 ,循环 体 的 内 部 也 可 以 包含 循环 语句 ,构成 多 重 循环 , 即 循环 的 嵌 套 。 需 要 特别 注意 关键 
字 要 小 写 ,例如 for 不 应 该 写成 For。 

4. break 和 continue 语句 

与 C/C++ 语言 相同 ,使 用 break 语句 使 得 程序 执行 从 for 语句 或 while 语句 中 跳出 ， 
continue 使 得 跳 过 循环 内 剩余 的 语句 而 进入 下 一 次 循环 。 


5.3.6 函数 
在 结构 化 程序 设计 中 ,函数 是 实现 结构 化 程序 设计 的 主要 手段 , 它 把 一 个 系统 中 需要 反 


复 多 次 执行 的 部 分 定义 为 一 个 函数 。 如 判断 一 个 数 是 否 为 素数 , 求 两 个 数 的 最 大 公约 数 等 。 
在 JavaScript 中 ,已 经 给 出 了 许多 标准 函数 。 同 时 也 允许 用 户 自己 定义 函数 。 
在 JavaScript 中 ,函数 是 以 function 开头 定义 的 ,由 函数 头 部 和 函数 体 构 成 ,一 般 形 
式 为 : 
function < 函数 名 > (< 形式 参数 表 >) 
{ 
变量 说 明 部 分 ; 
语句 部 分 ; 
return(< 表 达 式 >); 
} 
在 JavaScript 函数 定义 中 ,函数 名 后 有 形式 参数 表 , 这 些 形式 参数 变量 可 能 是 一 个 或 几 
个 ,在 JavaScript 中 可 通过 函数 名 .arguments. Length 来 检查 参数 的 个 数 。 在 函数 体 中 ,可 
以 分 为 变量 说 明 部 分 和 语句 部 分 ,变量 说 明 用 于 说 明 该 函数 所 要 处 理 的 数据 ,语句 部 分 是 对 
变量 的 处 理 。 在 JavaScript 中 ,由 于 数据 类 型 采用 弱 数 据 类 型 ,变量 说 明 部 分 可 以 省 略 
不 写 。 
在 函数 体 的 语句 部 分 通常 包含 一 个 返回 函数 值 的 语句 , 即 return 语句 ,返回 函数 值 。 
return 语句 不 一 定 是 语句 部 分 的 最 后 一 条 语句 ,但 逻辑 上 该 语句 会 被 执行 。 如 果 函 数 体 不 
包含 return 语句 , 则 默认 的 函数 返回 值 为 true。 


5.4 类 与 对 象 


在 软件 系统 开发 中 ,面向 对 象 程序 设计 (Object Oriented Programming,OOP) 是 目前 最 
主流 的 程序 设计 思想 ,大 部 分 的 软件 开发 工具 也 是 面向 对 象 的 ,例如 C++ .Java 等 。 面 向 对 
象 的 思想 将 问题 域 中 的 每 一 个 实体 都 映射 为 软件 系统 中 的 一 个 对 象 , 通 过 类 和 对 象 ,实现 了 
数据 和 数据 操作 的 封装 , 极 大 地 增强 了 系统 的 可 维护 性 和 可 扩展 性 。 


5.4.1 类 与 对 象 的 概念 


类 (Class) 和 对 象 (Object) 是 面向 对 象 程序 设计 的 灵魂 。 所 谓 “ 类 ”, 它 是 指 一 种 包含 成 
员 变 量 和 成 员 函 数 的 数据 结构 。 类 和 传统 的 过 程式 程序 设计 中 的 数据 类 型 相似 , 它 不 占用 
内 存 空 间 ,主要 目的 是 用 于 声明 对 象 。 对 象 是 用 类 来 声明 的 数据 结构 ,如 果 将 类 比 作 数据 类 
型 ,对象 就 是 相应 数据 类 型 的 变量 ,在 内 存 中 分 配 特定 大 小 的 空间 ,存储 数据 ,类 决定 了 对 该 
存储 空间 的 语义 解析 。 

JavaScript 并 不 是 一 个 完整 的 面向 对 象 的 程序 设计 语言 , 它 不 提供 关于 对 象 的 抽象 、. 封 
装 、 继 承 派生、 多 态 等 功能 。 它 是 一 种 基于 对 象 的 程序 设计 语言 ,预定 义 了 一 组 内 置 对 象 和 
浏览 器 对 象 。 同 时 ,对 HTML 文档 ,浏览 器 也 创建 DOM 对 象 。 通 过 这 些 对 象 操作 ,从 而 分 
享 面向 对 象 程序 设计 带 来 的 好 处 。 

因为 JavaScript 是 一 种 基于 对 象 的 程序 设计 语言 ,理论 上 讲 ,JavaScript 并 没有 定义 类 
的 功能 。 在 JavaScript 中 ,所 谓 定义 “类 ”, 其 实 是 一 种 模拟 的 自 定义 类 型 。 有 两 种 常见 的 形 
式 ,介绍 如 下 : 
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(1) 利用 函数 构造 类 

该 定义 类 的 方式 和 “函数 "定义 的 语法 相同 ,而 且 这 样 的 函数 称 为 该 类 的 构造 函数 。 用 
户 用 函数 定义 来 定义 类 ,然后 用 new 语句 创建 该 类 的 一 个 实例 (对 象 )。 一 般 形式 是 : 

function className(< propl, prop2, ...>) 

{ 


this. propl = propl; // 属 性 
this. prop2 = prop2; 


this. method1 = FunctionNamel; // 方 法 ,需要 定义 对 应 的 函数 
this. method2 = FunctionName2; 


} 


上 述 定义 即 定义 了 一 个 名 为 className 的 类 , 它 包 含 的 属性 是 propl,prop2,.…, 包 含 
的 成 员 函 数 是 methodl ,method2 ,...。 

(2) 利用 原型 prototype 定义 类 

在 JavaScript 中 ,类 是 以 函数 的 形式 来 定义 的 。 每 个 类 对 象 都 包含 一 个 prototype 属性 
成 员 对 象 。 用 户 可 以 向 对 象 的 prototype 属性 添加 属性 和 方法 。 

例如 : 为 JavaScript 内 置 对 象 Array 添加 方法 : 


< script lanuage = "javascript"> 
Array. prototype. max = function() 
{ 
var i, max = this[0]; 
for (i = 1; i<this.length; i++) 
{ 
if (max < this[i]) 
max = this[i]; 
} 
return max; 
}; 
</script > 


删除 String 对 象 两 侧 的 空格 ,代码 如 下 : 


String. prototype. trim() 
{ 

return this. replace(/(^\s+)|(\s+ $)/g, ""); 
} 


除了 可 以 为 内 置 对 象 添加 属性 和 方法 外 ,还 可 以 为 用 户 定义 的 类 添加 方法 ,示例 代码 
如 下 : 


function TestObject (name) 
‘ 
this.m name = name; 
} 
TestObject. prototype. ShowName = function() 
{ 


alert(this.m_name)7 


}; 


上 述 代 码 定 义 了 一 个 类 TestObject, 包 含 一 个 属性 m_name, 一 个 方法 ShowName()。 

【 例 5-3】 定义 一 个 JavaScript 类 ,包含 一 个 成 员 变量 ,三 个 成 员 函 数 ,并 用 不 同 的 方法 
定义 成 员 函 数 , 比 较 它 们 的 不 同 。 

分 析 : 在 JavaScript 中 ,可 以 使 用 function 定义 类 。 对 类 成 员 函 数 可 以 用 不 同 的 方法 
定义 ,不 同方 法 定义 的 函数 不 同 。 

代码 清单 : 


<html > 
<head > 
<meta charset= "utf 一 8"> 
< script language = "javascript"> 
function fl() 
{ 
return this.m name; 
} 
UL 
// 定 义 TestObject 类 
function TestObject (name) 
{ 
this.m name = name; 
// 成 员 函 数 定义 方法 1 
this.f1=f1; 
// 成 员 函 数 定义 方法 2 
this. £2 = function() 
document. write( "this. £f2( )< br >"); 
i 
} 
// 成 员 函 数 定义 方法 3 
TestObject. prototype. ShowName = function() 
0 
document. write(this.m name); 
} 
</script > 
<head> 
<body> 
< script language = "javascript"> 
a= new TestObject("0bj A"); 
b = new TestObject("0bj B") 
a.ShowName( ) 7 
b. ShowName( ) ; 
document. write(a. f1== b.f£1); 
document. write(a. f2== b.f£f2); 


document. write("<br>"); 
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document. write(a. ShowName == b. ShowName); 
</script > 

</body> 

</html > 


在 上 述 代码 中 ,在 页 面 的 头 部 定义 了 一 个 JavaScript 类 TestObiject ,用 三 种 方法 定义 了 
三 个 成 员 函 数 日 ()`.f2() 和 ShowName()。 在 页 面 的 < body > 体内 ,声明 了 两 个 对 象 a 和 |。 
在 浏览 器 中 打开 该 页 面 , 显 示 结 果 如 下 : 

obj R 

Oobj B 

true false true 

从 上 述 输出 结果 可 以 看 出 ,三 种 方法 定义 的 成 员 函 数 不 同 ,如 果 在 类 的 定义 中 咎 入 函数 
定义 (方法 2) ,不 同 的 实例 对 象 将 拥有 独立 的 成 员 函 数 副 本 。 使 用 prototype 定义 的 成 员 画 
数 (方法 3) ,所 有 对 象 拥有 同一 个 成 员 函 数 。 

此 外 ,不 同方 式 定义 的 成 员 函 数 ,JavaScript 解释 引擎 搜索 的 顺序 也 不 相同 ,具体 过 程 
是 : JavaScript 解释 引擎 在 处 理 使 用 ". "或 "[]" 操 作 符 引用 的 对 象 的 属性 和 方法 时 , 先 在 对 
象 本 身 的 实例 (this) 中 查找 ,如 果 找 到 就 返回 或 执行 。 如 果 没 有 查找 到 ,就 查找 对 象 的 
prototype 成 员 对 象 ,查看 是 否定 义 了 被 查找 的 对 象 和 方法 ,如 果 找 到 就 返回 或 执行 ,如 果 没 
有 查找 到 ,对 于 属性 就 返回 undefined, 对 于 方法 就 返回 runtime error()。 


5.4.2 对 象 操作 


无 论 是 C++ ,Java 等 面向 对 象 的 程序 设计 语言 还 是 JavaScript 这 样 基于 对 象 的 程序 设 
计 语 言 ,定义 类 的 目的 是 为 了 说 明 对 象 ,对 象 实现 数据 的 存储 ,类 只 是 定义 了 对 象 的 数据 结 
构 和 内 存 解 析 规 则 。 

1. 创建 对 象 

创建 对 象 就 是 按照 类 的 定义 在 内 存 中 分 配 一 段 空 间 , 并 为 该 空间 命名 。 在 JavaScript 
中 ,使 用 new 运算 符 可 以 创建 一 个 新 的 对 象 。 创 建 对 象 的 一 般 形 式 是 : 


myobj = new calssName( 参 数 表 ); 


其 中 ,myobj 为 新 建 对 象 的 名 称 ,calssName 是 类 的 名 称 , 参 数 表 用 于 激活 类 的 相应 构 
造 函 数 ,从 而 为 类 中 的 成 员 变量 赋值 。 

例如 ,创建 一 个 日 期 对 象 ,代码 为 : 

myDate = new Date( ); 

myBirthday = new Date("May 11,1975 6:15:00"); 

这 样 就 创建 了 两 个 新 的 日 期 对 象 myDate 和 myBirthday.myDate 对 象 取 当前 的 计算 机 
时 钟 作 为 其 日 期 值 ,而 第 二 个 Date 对 象 myBirthday 被 赋值 一 个 具体 的 日 期 和 时 间 。 

2. 访问 对 象 属性 和 方法 

访问 一 个 对 象 ,就 是 访问 对 象 的 属性 和 方法 。 对 象 属性 和 方法 的 引用 可 以 使 用 点 (. ) 操 
作 符 或 括号 (Lj) 操 作 符 ,一 般 形式 为 : 

对 象 名 .属性 名 | 方法 名 


或 : 对 象 名 [属性 名 | 方法 名 ] 

其 中 ,点 (. ) 操 作 符 是 最 常 使 用 的 形式 ,类 似 于 结构 体 。 而 括号 ([]) 操 作 符 常用 于 数组 
中 元 素 的 访问 。 

3. for…in 语句 

格式 如 下 : for( 对 象 属性 名 in 对 象 名 ) 

顺序 输出 对 象 各 个 属性 的 值 .如 果 是 方法 , 则 输出 对 应 的 函数 代码 。 例 如 : 

function showDatal( object) 

, for(var prop in object) 


document. write(object[prop]); 


} 


使 用 该 函数 时 ,在 循环 体 中 ,可 以 不 知道 对 象 属性 的 个 数 .for 可 以 自动 地 将 属性 取出 
来 ,直到 最 后 为 止 。 

4.this 关键 字 

关键 字 this 是 对 当前 对 象 的 引用 ,在 JavaScript 中 ,对 象 的 引用 是 多 层次 的 ,往往 一 
对 象 的 引用 又 需要 对 另 一 个 对 象 的 引用 ,而 另 一 个 对 象 有 可 能 又 要 引用 另 一 个 对 象 ,这样 有 
可 能 造成 混乱 ,为 此 JavaScript 提供 了 一 个 用 于 指定 当前 对 象 的 指针 this 。 


5.5 _ JavaScript 内 置 对 象 及 全 局 函数 


每 一 种 程序 设计 语言 ,都 可 以 分 成 语言 语法 和 标准 库 两 个 部 分 。 语 法 部 分 通常 用 于 定 
义 语言 的 基本 语法 规范 ,包括 字符 集 、 保 留 字 、 数 据 和 数据 类 型 程序 语句 等 内 容 。 标 准 库 则 
是 指 为 用 户 提供 的 一 组 常用 函数 库 或 类 库 。 对 于 结构 化 程序 设计 语言 ,例如 C 语言 ,标准 
库 通常 是 一 组 标准 的 函数 库 , 包 含 了 大 量 的 标准 函数 。 如 果 是 面向 对 象 的 程序 设计 语言 , 例 
如 C++ Java 等 ,标准 库 则 是 一 组 标准 类 库 , 包 含 了 大 量 的 预定 义 类 或 模板 类 。 使 用 标准 函 
数 库 或 类 库 , 可 以 提高 用 户 的 编程 效率 和 保证 程序 代码 质量 。 

由 于 JavaScript 是 一 种 基于 对 象 的 程序 设计 语言 , 它 具 有 面向 对 象 程序 设计 语言 的 特 
点 ,但 又 不 完全 是 面向 对 象 的 程序 设计 。 在 类 库 设 计 方 面 ,JavaScript 不 仅 提供 了 一 组 标准 
类 库 , 同 时 还 提供 了 一 组 常用 的 对 象 和 全 局 函数 。 而 在 面向 对 象 的 程序 设计 思想 中 ,尽量 不 
使 用 全 局 对 象 变量 ,所 有 的 函数 都 应 该 隶属 于 一 个 类 。 不 同 的 JavaScript 版 本 ,包含 的 内 部 
对 象 和 函数 也 不 一 样 ,本 节 介 绍 JavaScript 中 常用 的 内 部 对 象 和 函数 。 


5.5.1 字符 串 对 象 String 


在 JavaScript 中 ,每 个 字符 串 都 是 一 个 String 对 象 。 使 用 String 对 象 时 ,不 需要 像 一 般 
自 定义 对 象 一 样 用 new 关键 字 在 内 存 中 创建 对 象 ,而 是 可 以 直接 将 一 个 字符 串 赋 给 一 个 变 
量 。 字 符 串 对 象 封装 了 JavaScript 中 的 字符 串 以 及 相关 的 操作 。 

字符 串 对 象 的 生成 十 分 简单 ,而 且 是 隐 式 的 ,不 使 用 new 关键 字 ,例如 : 


var myStr = "Hello"; 第 


这 样 ,myStr 就 是 一 个 String 对 象 了 ,一 个 变量 被 声明 为 字符 串 对 象 之 后 , 它 就 拥有 了 | 章 
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这 个 对 象 类 的 属性 和 方法 ,可 以 和 一 般 对 象 一 样 .使 用 对 象 的 方法 ,取得 对 象 的 属性 。 

1. String 对 象 的 属性 

字符 串 对 象 的 属性 只 有 一 个 ,这 就 是 length( 长 度 ) 属 性 ,返回 字符 串 的 长 度 。 在 UTF-8 
编码 中 ,每 一 个 汉字 和 英文 字符 一 样 ,都 属于 一 个 字符 。 

例如 : 


< script type= "text/javascript"> 
var myStr = "Hello 你 好 "; 
document. write(myStr. length); 
</script > 


上 述 代 码 在 浏览 器 中 输出 字符 串 "Hello 你 好 "的 长 度 为 7。 

2. String 对 象 常用 方法 

字符 串 对 象 是 使 用 最 为 频繁 的 对 象 , 因 此 包含 更 多 的 成 员 函 数 ,常见 的 String 对 象 成 
员 函 数 见 表 5-1。 

表 5-1 String 对象 常用 成 员 函 数 
函数 及 一 般 形 式 功 能 

取 字符 函数 ,返回 字符 串 对 象 中 下 标 为 pos 的 字符 (字符 串 下 标 pos 
为 大 于 等 于 0, 且 小 于 字符 串 长 度 的 整数 ) 
第 一 种 格式 中 ,返回 下 标 从 posl 到 pos2 之 前 的 字符 串 (不 含 下 标 是 
pos2 的 字符 )。 第 二 种 格式 返回 下 标 为 pos 开始 直到 字符 串 结束 的 
所 有 字符 
subStr 是 一 个 待 查找 的 字符 或 者 字符 串 ,可 以 是 常量 ,也 可 以 是 变 
量 。 在 省 略 StartPos 的 情况 下 ,此 函数 将 从 字符 串 的 第 一 个 字符 开 
始 查找 ; 当 StartPos 参数 存在 的 情况 下 ,这 个 函数 从 字符 串 中 下 标 
为 StartPos 的 字符 开始 查找 。 当 StartPos 超过 字符 串 的 长 度 时 , 返 
回 一 1。 当 所 希望 查找 的 字符 串 找 不 到 时 ,返回 一 1。 当 字符 串 中 有 
两 个 以 上 的 待 查找 字符 串 , 则 返回 被 搜寻 字符 串 中 位 置 在 最 前 面 的 
待 查 字符 串 的 下 标 位 置 





charAt(pos) 





substring (posl ,pos2) 
substring (pos) 








indexOf(subStr) 
indexOf(subStr, StartPos) 





lastIndexOf (subStr) 


lastIndexOf (subStr, StartPos) 辣 ndexOfO 甬 数 类 似 ; 只 是 查找 是 从 字符 电 必 部 往 朋 查 我 





在 字符 串 内 检索 指定 的 值 ,或 找到 一 个 或 多 个 正则 表达 式 的 匹配 。 


match( searchvalue) 参数 searchvalue 规定 要 检索 的 字符 串 值 。 参 数 regexp 为 正则 表达 
match( regexp) 式 。 如 果 没 有 找到 任何 匹配 的 文本 ,match() 返 回 null。 和 否则 ,返回 


一 个 数组 ,其 中 存放 了 与 它 找到 的 匹配 文本 有 关 的 信息 

将 字符 串 中 的 字 串 strl 用 str2 替换 ,同时 replace() 支 持 正则 表达 

式 , 它 可 以 按照 正则 表达 式 的 规则 匹配 字符 或 字符 串 

将 字符 串 中 所 有 的 字母 变 为 小 写字 母 , 返 回 变 化 后 的 结果 。 但 是 , 原 

字符 串 内 的 大 小 写 不 变 

将 字符 串 中 所 有 的 字母 变 为 大 写字 母 ,返回 变 化 后 的 结果 。 但 是 , 原 

字符 串 内 的 大 小 写 不 变 

将 字符 串 分 割 为 字符 串 数组 ,并 返回 此 数组 。Separator 为 分 隔 符 ， 

limit 为 可 选 参数 ,表示 分 割 的 次 数 .如果 无 此 参数 为 不 限制 次 数 
length() 返回 字符 串 的 长 度 ,所 谓 字符 串 的 长 度 是 指 其 包含 的 字符 的 个 数 





replace(strl .str2) 





toLowerCase() 





toUpperCase() 





split(separator, limit) 








在 JavaScript 中 ,提供 了 大 量 的 字符 串 处 理 函 数 ,功能 非常 强大 ,下 面 是 几 个 简单 的 例 
子 。 例 如 ,在 HTML 的 多 行文 本 框 输入 中 ,包含 了 回 车 换行 符 , 如 果 要 保存 到 数据 库 中 , 则 
回 车 换行 无 法 保存 。 如 果 要 将 数据 库 内 容 显 示 , 则 没有 换行 ,因此 ,在 保存 数据 库 时 可 以 将 
文本 框 中 的 回 车 换行 蔡 换 为 HTML 的 < br > 标记 ,代码 如 下 : 

// 设 字符 串 保 存在 变量 str 中 , 删除 其 中 的 回 车 (\r) ,换行 符 (\n) 


str = str. replace(/\r/g,"<br>"); 
str = str. replace(/\n/g,""); 


上 述 代 码 使 用 了 正则 表达 式 ,“\r" 表 示 回 车 字符 (\13),“/g” 表 示 全 部 ,即将 str 中 全 部 
的 “\r” 替 换 为 <br >。 第 二 行 则 表明 将 全 部 的 换行 “\n”(\10) ,替换 为 空 , 即 删除 。 如 果 要 将 
全 部 的 字符 “a” 替换 为 *A”, 可 写 为 str 一 str. replace(/a/g,"A"); 

字符 串 的 打 散 也 是 常用 的 操作 之 一 ,例如 : 

var strl = "aa;bb;cce"; 

var str2= "hello"; 

sl= strl. split(";"); 

s2= str2. split(""); 

则 得 到 一 个 字符 数组 s1==["aa","bb","cc"],s2==["h","e","l","l","o"]。 

与 split 对 应 的 函数 是 Array 对 象 的 join(delimiter) 方 法 ,使 用 给 定 的 分 隔 符 将 一 个 数 
组 合并 为 一 个 字符 串 ,例如 : 

var aa = new Array("jpg", "bmp", "gif", "ico", "png"); 

var str=aa. join("|"); 


则 字符 串 portableList 为 "jpg|bmplgiflico|png”。 
5.5.2 正则 表达 式 对 象 RegExp 


在 字符 串 处 理 中 ,经 常会 用 到 查找 某 种 特定 模式 的 字符 串 ,或 者 是 验证 某 个 字符 串 是 否 
符合 特定 的 模式 。 例 如 ,检查 一 个 字符 串 是 否 为 有 效 的 邮箱 地 址 ,检查 用 户 账户 是 否 是 字母 
和 数字 的 组 合 等 。 用 来 描述 这 种 复杂 规则 的 表达 式 称 为 正则 表达 式 。 在 JavaScript 中 ， 
RegExp 对 象 表示 正则 表达 式 , 它 是 对 字符 串 执行 模式 匹配 的 强大 工具 。 使 用 正则 表达 式 ， 
可 以 大 大 减少 字符 串 处 理 的 编程 工作 量 ,使 数据 有 效 性 验证 更 加 准确 和 高 效 。 

1. 正则 表达 式 的 概念 

正则 表达 式 (Regular Expression) 的 概念 最 初出 现 于 理论 计算 机 科学 的 自动 控制 理论 
和 形式 语言 理论 中 ,用 于 对 模型 和 规则 的 一 种 形式 描述 。1950 年 ,正则 表达 式 的 概念 被 应 
用 于 UNIX 的 编辑 器 工具 软件 ,随后 被 普及 开 来 。 许 多 程序 设计 语言 都 支持 利用 正则 表达 
式 进 行 字符 串 操作 。 

正则 表达 式 是 一 种 由 普通 字符 和 特殊 字符 (元 字符 ) 组 成 的 字符 串 匹 配 模式 ,在 正则 表 
达 式 中 ,元 字符 (Metacharacter) 是 拥有 特殊 含义 的 字符 。 正 则 表达 式 只 能 使 用 "人 开头 和 
结束 ,不 能 使 用 双 引 号 ,因为 双 引号 是 字符 串 对 象 的 表示 方法 。 

在 JavaScript 中 ,正则 表达 式 中 可 以 使 用 的 元 字符 及 其 含义 见 表 5-2。 
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表 5-2 JavaScript 正则 表达 式 元 字符 



































元 字符 = 元 字符 和 
, 匹配 除 换行 符 (\n) 以 外 的 任意 字符 \0 “| 匹配 NULL 
\d 匹配 数字 (0.. 9) \r 匹配 回 车 符 
\D “| 匹配 非 数 字 字 符 \n “| 匹配 换行 符 
\s ”| 匹配 空白 字符 \t “| 匹配 制 表 符 
\S “| 匹配 非 空白 字符 \v “| 匹配 垂直 制 表 符 
Rs Vf | 匹配 换 页 符 
匹配 方 括号 之 间 的 任何 字符 ,字符 范围 可 
\W | 匹配 非 单词 字符 [| 必用 *-* 连 接 , 例 如 Labed] 可 以 写 为 [ad] 
\b “| 查找 处 在 单词 的 开始 或 结束 的 匹配 [] “| 匹配 不 在 方 括号 之 间 的 任何 字符 
\B “| 查找 不 在 单词 开始 或 结束 处 的 匹配 (和 ) | 指定 子 表达 式 , 用 于 分 组 





在 上 述 表格 中 ,所 谓 “ 匹 配 ”, 就 是 指 字符 串 符合 某 种 条 件 ( 正 则 表达 式 ) ,通常 是 指 这 个 
字符 串 里 有 一 部 分 (或 几 部 分 ) 能 满足 正则 表达 式 给 出 的 条 件 。 另 外 ,空白 字符 是 指 空格 符 
(space character) , 回 车 符 (carriage return character) ,换行 符 (new line character) , 制 表 符 
(tab character) ,垂直 制 表 符 (vertical tab character) , 换 页 符 (form feed character) 。 

如 果 要 查找 元 字符 本 身 的 话 ,比如 查找 字符 “. ?或 "* ”, 应 使 用 转 义 字符 。 转 义 字符 使 
用 人" 开始 ,用 于 取消 紧 跟 在 后 面 的 字符 的 特殊 意义 。 因 此 ,要 查找 字符 “. 或"“* ”, 应 该 使 
用 \. 和 \ x 。 要 查找 “\" 字 符 本 身 , 可 使 用 \\。 


例如 


: myfile\. dat 匹配 myfile. dat,d:\\GPMS3 匹配 d:\GPMS3。 


在 正则 表达 式 中 ,还 会 遇 到 重复 的 情况 ,这 需要 使 用 量词 (限定 符 ) 来 指定 重复 的 数量 ， 






































表 5-3 常用 限定 符 

量词 /语法 说 明 

本 匹配 任何 包含 零 不 或 多 个 mn 的 字符 串 。 例 如 : /lo* /g, 在 字符 串 中 查找 包含 0 个 或 多 个 “0” 
的 字符 串 

a 匹配 包含 至 少 一 个 6 的 任何 字符 囊 

本 量词 ,匹配 任何 包含 零 个 或 一 个 n 的 字符 串 

n(x) ”| 匹配 包含 X 个 习 的 序列 的 字符 串 

nfxyy) | 匹配 包含 x 或 y 个 n 的 序列 的 字符 串 

n{x,) | 匹配 包含 至 少 x 个 mn 的 序列 的 字符 串 

~n 匹配 任何 开头 为 5 的 字符 串 。 例如: /~You/g, 查 找 所 有 以 了 开头 的 字符 串 You 

给 匹配 任何 结尾 为 的 字符 囊 

,_ | 匹配 任何 其 后 紧 接 指定 字符 串 5 的 字符 囊 。 例 如 : /is(7 二 ok /g, 则 查找 所 有 的 后 耐 是 “ok” 
的 字符 串 “is” 

?In 匹配 任何 其 后 没有 紧 接 指定 字符 串 n 的 字符 串 


2. 创建 RegExp 对 象 
对 于 正则 表达 式 , 可 以 在 有 关 的 字符 串 对 象 中 直接 使 用 ,也 可 以 创建 RegExp 对 象 , 然 
后 在 字符 串 操作 中 使 用 。 前 者 使 用 直接 量 语法 ,一 般 形式 为 : 


/pattern/attributes 


如 果 要 创建 RegExp 对 象 ,一 般 形式 为 : 
new RegExp(pattern, attributes ); 
其 中 ,参数 pattern 是 一 个 字符 串 , 指定 正则 表达 式 模 式 或 其 他 正则 表达 式 。 参数 
attributes 是 一 个 可 选 的 字符 串 ,包含 属性 "g"、"i" 和 "mo" ,分 别 用 于 指定 全 局 匹配 、 区 分 大 小 
写 的 匹配 和 多 行 匹配 ,gi 表示 全 局 并 区 分 大 小 写 的 匹配 。 
例如 : str 二 str. replace(/\r/g,"<br>"); 将 字符 串 str 中 的 所 有 回 车 字符 (\r) 全 部 用 


< br > 替换 。 


对 于 下 述 代码 , 则 创建 一 个 RegExp 对 象 。 


< script type = "text/javascript"> 
function checkemail( str) 


{ 
// 在 Javascript 中 ,正则 表达 式 只 能 使 用 "/" 开 头 和 结束 ,不 能 使 用 双 引 号 
var Expression=/\w+ ([—+.']\w+)x@\wt+([—.]\w+)x\.\w+([— .J]\Ww+)x*/; 
Var objExp = new RegExp (Expression); 
if (objExp. test(str) == true) 
return true; 
else 
return false; 
} 
</script > 


正则 表达 式 在 一 开始 看 上 去 是 比较 麻烦 的 ,其 实 , 一 个 正则 表达 式 是 由 元 字符 和 限定 符 
构成 的 串 ,元 字符 的 后 面 跟 限定 符 , 只 要 理解 这 两 类 符号 的 含义 ,正则 表达 式 的 含义 也 就 不 
难 理解 了 。 例 如 ,\w 十 表示 至 少 一 个 字母 .数字 或 下 面 线 字符 。 

3，RegExp 对 象 属性 和 方法 

RegExp 对 象 是 JavaScript 中 提供 的 对 字符 串 进 行 匹配 、 替 换 等 操作 的 对 象 , 和 其 他 对 
象 一 样 ,也 是 由 一 系列 的 属性 和 方法 构成 的 , 见 表 5-4。 


属 人 性 


表 5-4 RegExp 对 象 属性 
说 明 





global 


查看 给 定 的 正则 表达 式 是 否 执 行 全 局 匹配 。 如 果 g 标志 被 设置 , 则 该 属性 为 true, 否则 


为 false 





ignoreCase 


如 果 设 置 了 "标志 , 则 返回 true, 和 否则 返回 false 





multiline 


查看 正则 表达 式 是 否 以 多 行 模式 执行 模式 匹配 。 在 这 种 模式 中 ,如 果 要 检索 的 字符 串 中 


含有 换行 符 ,^ 和 $$ 除了 匹配 字符 串 的 开头 和 结尾 外 还 匹配 每 行 的 开头 和 结尾 





lastIndex 


保存 上 一 次 匹配 文本 之 后 的 第 一 个 字符 的 位 置 。 上 次 匹配 的 结果 是 由 方法 RegExp. exec 
(和 RegExp. test() 找 到 的 ,它们 都 以 lastIndex 属性 所 指 的 位 置 作为 下 次 检索 的 起 始点 。 


找 不 到 可 以 匹配 的 文本 时 ,lastIndex 属性 重 置 为 0 





source 





返回 模式 匹配 所 用 的 文本 。 该 文本 不 包括 正则 表达 式 直 接 使 用 的 定 界 符 , 也 不 包括 标志 


gl.m 
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RegExp 对 象 方法 见 表 5-5。 
表 5-5 RegExp 对 象 方法 

方 法 说 明 
检测 字符 串 str 是 否 匹 配 某 个 模式 。 如 果 str 中 含有 与 RegExpObject 匹配 的 文本 , 则 返回 
true, 否则 返回 false 
检索 字符 串 中 正则 表达 式 的 匹配 。 参 数 str 为 要 检测 的 字符 串 。 返 回 一 个 数组 ,存放 匹配 
结果 。 如 果 未 找到 匹配 , 则 返回 null 

compile 在 脚本 执行 过 程 中 编译 正则 表达 式 。 参 数 exp 为 正则 表达 式 ,mod 规定 匹配 的 类 型 ."g" 
(exp,mod) | 用 于 全 局 匹配 ,"i" 用 于 区 分 大 小 写 , "gi" 用 于 全 局 区 分 大 小 写 的 匹配 





test(str) 





exec(str) 








例如 ,有 一 段 示例 代码 如 下 : 


< script type = "text/javascript"> 

var str = "Hello World!"; 

var patt = /lox /g; 

document. write( str. match( patt) ); 
</script > 


在 上 述 代 码 中 ,使 用 了 String 对 象 的 match 方法 ,查找 字符 串 中 匹配 的 子 字符 串 。 输 
出 结果 为 : 1,1o,1 
例如 : (Ad{1,3) 八 . ){3)\d{1,3) 是 一 个 简单 的 IP 地 址 匹配 表达 式 。 其 中 ,\d{1,3} 匹 配 
一 到 三 位 的 数字 ,C\d(1,3 八 .){3} 匹 配 三 位 数字 加 上 一 个 英文 句号 ,这 个 整体 被 定义 为 一 
个 分 组 ,然后 分 组 重复 3 次 ,最 后 再 加 上 一 个 一 到 三 位 的 数字 (\d{1,3))。 这 是 一 个 简单 的 
IP 地 址 模式 匹配 ,当然 ,IP 地 址 的 每 一 个 数字 都 是 小 于 255 的 ,可 以 进一步 写 出 更 加 准确 的 
验证 IP 地 址 的 正则 表达 式 。 
在 书写 正则 表达 式 时 ,还 经 常用 [] 来 指定 一 个 范围 ,例如 : [0-9] 代 表 的 含义 与 \d 完全 
一 致 ,表示 一 位 数字 。[a-z0-9A-Z_] 等 同 于 \w。 例 如 ,对 于 下 述 代码 : 
<script type = "text/javascript"> 
var str = "Hello_ 你 好 !"; 
var patt = /M\w/g; 
document. write( str. match( patt) ); 
</script > 


输出 结果 为 : H,e,l,1,0,_ 

可 见 元 字符 “\w” 只 是 匹配 一 个 字母 .数字 或 下 面 线 “_”, 不 能 匹配 汉字 等 其 他 字符 。 

例如 : 正则 表达 式 Od\d\d\d\d\d\d\d\d, 它 匹配 这 样 的 字符 串 : 以 0 开头 ,然后 是 
两 个 数字 ,然后 是 一 个 连 字号 ”-”, 最 后 是 8 个 数字 ( 即 中 国 的 区 号 为 3 位 的 电话 号 码 )。 其 
中 ”\d? 是 元 字符 ,匹配 一 位 数字 (0,1,2,…)。” "不 是 元 字符 ,只 匹配 它 本 身 一 一 连 字符 或 
者 减 号 。 为 了 避免 重复 ,也 可 以 这 样 写 这 个 正则 表达 式 : 0\d{2)-\d{8}。“\d” 后 面 的 {2)、 
{18} 表 示 前 面 的 "\d "必须 连续 重复 匹配 的 次 数 为 2 次 (8 次 ) 。 

4. 常用 正则 表达 式 

正则 表达 式 通 常用 于 表单 中 的 字符 串 处 理 、 表 单数 据 的 有 效 性 验证 等 ,实用 高 效 。 下 面 
是 一 些 常 用 的 正则 表达 式 。 





(1) 匹配 中 文字 符 的 正则 表达 式 : [\u4e00-\u9fa5]。 

(2) 匹配 空白 行 的 正则 表达 式 : 作 nNXs* \r/ ,元 字符 \s 匹配 一 个 空白 字符 ,后 跟 限定 词 
* 表示 任意 个 数 的 空白 字符 。 

(3) 匹配 HTML 标记 的 正则 表达 式 : /<(\Sx ?)[*>] *>. <? < 八 1 >|<. *? />/。 

(4) 匹配 首尾 空白 字符 的 正则 表达 式 : /As* |\s* $/, 非 常 有 用 的 表达 式 , 可 以 用 来 
删除 行 首 行 尾 的 空白 字符 (包括 空格 、 制 表 符 、 换 页 符 等 )。 

(5) 匹配 E-mail 地 址 的 正则 表达 式 : 八 w 十 ([- 十 .由 w 十 ) * @Nw 十 ([-. NAw 十 ) x\.\ 
w 十 ([-. ]\w 十 ) * /, 常 用 于 表单 验证 。 

(6) 匹配 网 址 URL 的 正则 表达 式 : /[a-zA-z] 十 ://[^\s]*/。 

(7) 匹配 账号 是 否 合 法 ,以 字母 开头 ,允许 5 一 16 字 节 ,允许 字母 数字、 下面 线 , 则 符合 
上 述 要 求 的 正则 表达 式 为 /^[a-zA-Zj[a-zA-20-9_]{4,15) $/。 

(8) 匹配 国内 电话 号 码 : 八 d{3)-\d{8} |\d{4)-\d{7}1\d{4)-\d{8})/, 匹 配 形式 如 010- 
11112222 .0531-8836111 或 0531-88361111。 

(9) 匹配 中 国 邮政 编码 : /[1-9]\d{5)(?1\d)/ ,中国 邮政 编码 为 6 位 数字 。 

(10) 匹配 身份 证 : 八 d{15) 1\d{18}/, 中 国 的 身份 证 为 15 位 或 18 位 ,只 匹配 位 数 ,没有 
有 效 性 验证 。 

(11) 匹配 IP 地址 : 八 d 十 \.\d 十 \. \d 十 \. \d 十 /, 提 取 IP 地 址 时 有 用 。 

(12) 匹配 特定 数字 ,例如 : 

/*[1-9]\dx $/ // 匹 配 正 整 数 

==9Ndw $y // 匹 配 负 整数 

/^-?[1-9]\dx $/ ”// 匹 配 整 数 

A/*[1-9]\dx 10$/ ”// 匹 配 非 负 整 数 ( 正 整 数 或 0) 

A-[1-9]\dx10$/ // 匹 配 非 正 整数 ( 负 整 数 或 0) 

/*[1-9]\dx\.\dx |0\.\dx [1-9]\dx $/ // 匹 配 正 浮 点 数 

人 =([2=9]NdwN Ade loNNas li-=90Ndr)$7 // 匹 配 负 浮 点 数 

/*-?([1-9]\dx\.\dx |0O\.\dx [1-9]\dx |0?\.0+10)$/ // 匹 配 浮 点 数 

/*[1-9]\dx\.\dx |O\.\dx [1-9]\dx |0?\.0+|0$/ // 匹 配 非 负 浮 点 数 ( 正 浮 点 数 + 0) 

/A*(-([1-9]\dx\.\dx |0\.\dx[1-9]\dx))|0?\.0+10$/ // 匹 配 非 正 浮 点 数 ( 负 浮 点 数 + 0) 


(13) 匹配 特定 字符 串 


/*[A-Za-z]+$/ // 匹 配 由 26 个 英文 字母 组 成 的 任意 长 度 的 字符 串 
/*[A-2]+$/ // 匹 配 由 26 个 英文 字母 的 大 写 组 成 的 任意 长 度 的 字符 串 
/*[A-Za-z0-9]+$/  // 匹 配 由 数字 和 26 个 英文 字母 组 成 的 字符 串 

人 NAw+ $/ // 匹 配 由 数字 ,英文 字母 或 者 下 画 线 组 成 的 任意 长 度 的 字符 串 


5.5.3 数学 对 象 Math 


在 JavaScript 中 ,Math 对 象 封装 了 常用 的 数学 常数 和 一 些 常 用 的 数学 运算 ,这 些 运 算 
包括 : 三 角 函 数 、 对 数 函 数 、 指 数 函 数 和 一 些 舍 人 函数 等 。 

1. Math 对 象 属性 

Math 对 象 中 的 属性 与 其 他 对 象 的 属性 有 一 些 区 别 。 这 些 属 性 是 常用 的 数学 常数 , 它 
们 是 定 值 ,因此 它们 是 只 读 的 ,不 允许 对 这 些 对 象 属性 进行 写 操作 。 表 5-6 列 出 了 Math 对 
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象 的 属性 名 、 描 述 和 近似 值 。 
表 5-6 Math 对 象 属性 

属 性 名 说 明 
E 常数 e, 也 称 欧 拉 常 数 , 它 是 自然 对 数 的 底 。 近 似 值 为 2. 718 
LN2 2 的 自然 对 数 , 即 以 e 为 底 的 2 的 对 数 ,近似 值 为 0.693 
LN10 10 的 自然 对 数 ,近似 值 为 2. 302 
LOG2E 以 2 为 底 的 常数 下 的 对 数 ,近似 值 为 1. 442 
LOG10E 以 10 为 底 的 常数 下 的 对 数 (常用 对 数 ) ,近似 值 为 0. 434 
PI 常数, 即 圆周 长 和 直径 之 比 ,近似 值 为 3. 14159 
SQRT1-2 1/2 的 平方 根 ,近似 值 为 0. 707 
SQRT2 2 的 平方 根 ,近似 值 为 1. 414 





2. Math 对 象 成 员 方法 
Math 对 象 的 成 员 函 数 分 为 三 角 函 数 \ 反 三 角 函 数 、 对 数 、 指 数 函 数 、 舍 入 函 数 以 及 随机 
函数 等 ,常用 函数 见 表 5-7。 
表 5-7 Math 对 象 成 员 方法 






































成 员 函 数 说 明 
sin(x) ,cos(x) ,tan( x) 求 x 的 正弦 .余弦 和 正切 值 ,x 为 弧度 值 
asin(x) ,acos( x) ,atan( x) 求 x 的 反正 弦 、 反 余弦 和 反正 切 值 ,x 为 弧度 值 
atan2(x,y) 直角 坐标 系 中 (x,y) 点 与 x 轴 所 成 的 角度 
exp(x) e 的 x 次 方 
log(x) x 的 以 e 为 底 的 自然 对 数 
pow(x,y) 计算 x 的 y 次 方 
sqrt(x) x 的 平方 根 
abs(x) x 的 绝对 值 
round( x) x 四 舍 五 人 值 
ceil(x) 大 于 或 者 等 于 x 的 最 小 整数 值 ,向 上 取 整 或 各 上 舍 和 人 
floor(x) 小 于 或 者 等 于 x 的 最 大 整数 值 ,向 下 取 整 或 向 下 舍 入 
random() 产生 随机 数 





5.5.4 日 期 对 象 Date 


Date( 日 期 ) 对 象 封装 了 有 关 日 期 和 时 间 的 一 些 变量 和 函数 ,利用 这 些 变量 ,可 以 掌握 当 
前 日 期 和 时 间 。Date 对 象 中 没有 一 个 属性 是 可 以 直接 地 设 定 或 者 取得 的 ,这 种 思想 更 符合 
对 象 的 封装 思想 , 即 成 员 变 量 都 是 私有 的 ,提供 公有 的 成 员 函 数 来 访问 私有 的 成 员 变 量 。 

1. 创建 日 期 对 象 

创建 日 期 对 象 和 数组 对 象 有 些 相 似 , 都 需要 使 用 new 关键 字 , 但 它 的 构造 函数 比较 复 
杂 , 有 多 个 不 同 参 数 的 构造 函数 ,我 们 可 以 根据 需要 选择 一 种 格式 来 生成 一 个 新 的 日 期 对 
象 ,下 面 分 别 给 出 它们 的 语法 和 范例 : 

格式 1: var DateObj 二 new Date(); 

这 是 最 简单 的 一 种 日 期 对 象 的 创建 格式 。 创 建 该 对 象 时 .激活 默认 的 构造 函数 ,该 构造 


函数 取 计 算 机 的 当前 时 间作 为 日 期 对 象 的 时 间 值 。 

格式 2: var DateObj 二 new Date( 年 ,月 ,日 ); 

这 种 格式 中 也 有 几 点 要 说 明 : 

(1) 参数 是 数值 ,不 是 字符 串 .年份 取 后 两 位 。 

(2) 当 “ 月 "超过 12 或 “日 ”超过 当月 天 数 时 ,将 自动 进位 换算 到 下 一 年 和 月 。 

(3)“ 月 ”参数 取 值 是 从 0 到 11, 即 实际 月 份 比 参数 大 1。 

(4) 小 时 、 分 、 秒 将 被 认为 是 0。 

格式 3: var DateObj 二 new Date( 年 ,月 ,日 ,小 时 ,分 , 秒 ); 

这 种 格式 与 前 一 种 很 相近 ,例如 : var Datel 王 new Date(96,3,23,20,55,00); 

格式 4: var DateObj 二 new Date(" 月 日 .年 小 时 : 分 : 秒 "); 

在 这 种 格式 中 ,参数 是 一 个 字符 串 ,描述 了 新 建 Date 对 象 的 各 个 属性 ,该 字符 串 需要 满 
足以 下 情况 ， 

(1) 在 月 .日 之 间 的 空格 可 以 省 略 , 但 是 在 年 .时 间 之 间 的 空格 不 可 以 省 略 , 和 否则 会 使 日 
期 无 效 。 月 份 必 须 用 英语 的 January,Februlary,.… ,December ,不 能 用 数字 。 

(2) 日 .年 之 间 的 逗号 不 能 省 略 。 

(3) 时 间 部 分 的 小 时 、 分 、 秒 间 的 冒号 不 可 省 略 。 

(4) 当 * 日 ?这 一 项 超过 当月 的 天 数 时 ,将 自动 进位 换算 到 下 一 个 月 .“ 小 时 ?这 一 项 超 
过 24 时 也 将 进位 换算 成 日 。 

例如 : var meetDate 二 new Date("June 22,2016 11:50:00"); 

2. Date 对 象 常用 方法 

对 于 Date 对 象 , 不 同 的 浏览 器 支持 不 完全 相同 ,下 面 是 一 组 常用 的 Date 对 象 方法 , 见 


表 5-8 Date 对 象 常用 方法 












































方 法 名 功 能 
getDate() 返回 Date 对 象 一 个 月 中 的 某 一 天 (1 一 31) 
getDay() 返回 Date 对 象 一 周 中 的 某 一 天 (0 一 6) 
getMonth() 返回 Date 对 象 的 月 份 (0 一 11) 
getFullYear() 返回 Date 对 象 以 四 位 数字 返回 年 份 
getHours() ,getMinutes() ,getSeconds() | 返回 Date 对 象 的 小 时 (0 一 23)、 分 钟 (0 一 59) 和 秒 数 (0 一 59) 
setDate() 设置 Date 对 象 中 月 的 某 一 天 (1 一 31) 
setMonth() 设置 Date 对 象 中 的 月 份 (0~11) 
setFullYear() 设置 Date 对 象 中 的 年 份 ( 四 位 数字 ) 
setHours() ,setMinutes() ,setSeconds() | 设置 Date 对 象 中 的 小 时 (0 一 23) 分钟 (0 一 59) 和 秒 数 (0 一 59) 
setTime() 以 毫秒 设置 Date 对 象 
toString() 把 Date 对 象 转换 为 字符 串 
toDateString() 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
toTimeString() 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
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除了 上 述 这 些 常 用 的 方法 外 ,Date 对 象 还 包含 许多 关于 世界 时 和 本 地 时 间 的 设置 方 
法 ,在 此 省 略 。 

【 例 5-4】 编写 程序 ,在 页 面 上 显示 一 个 走动 的 时 钟 ,并 且 当 用 户 关闭 页 面 时 ,显示 该 
页 面 停留 的 时 间 。 

说 明 : 获取 页 面 的 停留 时 间 , 需 要 对 打开 页 面 和 关闭 页 面 时 间 编 程 即 可 。 

代码 清单 如 下 : 


<html > 
<head > 
<meta charset = "utf 一 8"> 
< script type = "text/javascript"> 
Var timeStr = "", dateStr = ""; 
var timebegin = new Date(); 
function timeclock () 
{ 
now= new Date(); 
// 时 间 
hours = now.getHours( ); 
minutes = now.getMinutes(); 
seconds = now.getSeconds(); 
timeStr = ((hours <10)? "0 
timeStr += ((minutes <10)? ":0 


timeStr+= ((seconds <10) ? ":0" : ":") + seconds; 


) + hours; 






: ":") + minutes; 


document. myclock. mytime. value = timeStr; 
// 日 期 
day = now.getDate(); 
month = now. getMonth( ) + 17 
Year = now.getFullYear(); 
dateStr = year + "/" + month +"/" +day; 
document. myclock. mydate. value = dateStr; 
Timer = window. setTimeout("timeclock()",1000); 
} 
function timespan( ) 
' 


timeend = new Date(); 


minutes = (timeend. getMinutes() — timebegin.getMinutes()); 

seconds = (timeend. getSeconds() — timebegin.getSeconds()); 

time = (seconds + (minutes * 60)); 

window. alert(' 您 在 本 页 共 停 留 了 ' + time+" 秒 钟 "); 

} 

</script> 

</head> 

<body onload= " timeclock ()" onunload = "timespan();"> 

<form name = "myclock"> 

时 间 : < input type = "text" name= "mytime" value= "" size= "10"><br> 
日 期 : < input type = "text" name = "mydate" value=" 


size= "10"> 


</form> 
</body> 
</html > 


显示 结果 如 图 5-8 所 示 。 


[Dexa5-4 heml 
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时 间 ，[130301 
日 期 ，2016925 


此 网 页 显示 : 
爷 在 本 页 共 停 补 了 116 钞 种 
车 止 此 页 再 旦 示 对 活 三 . 








图 5-8 时 钟 显示 示例 


在 上 述 代码 中 ,采用 了 UTF-8 编码 ,因此 ,如 果 使 用 Windows 记事 本 编辑 上 述 网 页 ,在 
保存 文件 时 需要 选择 编码 方式 为 UTF-8, 和 否则 网 页 显示 为 乱码 ,因为 记事 本 程序 文件 存储 
的 默认 编码 为 ANSI 编码 。 在 上 述 程序 中 ,用 到 了 window 对 象 . document 对 象 和 HTML 
DOM 对 象 , 详 细 介 绍 见 后 面 的 讲解 。 


5.5.5 数组 对 象 Array 


在 计算 机 程序 设计 语言 中 ,数组 是 用 于 保存 一 组 数据 的 复杂 数据 类 型 。 因 为 
JavaScript 为 弱 类 型 语言 ,不 可 能 提供 数组 类 型 ,数组 被 定义 成 一 种 内 置 的 Array 对 象 。 用 
户 通过 新 建 Array 对 象 来 创建 数组 ,并 对 数组 对 象 进行 操作 。 

在 JavaScript 中 ,数组 的 元 素 不 一 定 是 相同 的 ,元 素 可 以 是 不 同类 型 的 。 数 组 的 每 一 个 
成 员 对 象 都 有 一 个 “下 标 ”, 用 来 表示 它 在 数组 中 的 位 置 ( 下 标 从 0 开始 )。 程 序 通过 括号 操 
作 符 ([j) 访 问 数组 成 员 。 

1. 一 维 数组 

在 JavaScript 中 ,要 使 用 数组 ,必须 创建 Array 对 象 ,创建 Array 对 象 ,有 三 种 形式 : 

(1) 定义 空 数组 


var < 数组 名 > = new Rrray() 


对 于 空 数组 ,数组 中 元 素 的 个 数 不 确 定 , 接 下 来 可 以 为 数组 添加 元 素 。 


一 般 形 式 是 : 

< 数组 名 >[< 下 标 >] = < 表达 式 >; 

例如 : 

var colorRrray= new Array(); // 定 义 一 个 空 数组 
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colorArray[0] = "red"; 
colorArray[1] = "green"; 
colorArray[2] = "blue"; 
colorArray[3] = 255; 

(2) 创建 确定 元 素数 量 的 空 数组 


var < 数组 名 > = new Array(size); 


参数 size 是 期 望 的 数组 元 素 个 数 , 数 组 对 象 的 length 属性 值 将 被 设 为 size 的 值 。 
(3) 创建 数组 并 初始 化 数组 元 素 
用 户 还 可 以 在 定义 数组 的 时 候 直接 初始 化 元 素数 据 , 一 般 形式 是 : 


var < 数组 名 > = new Array(< 元 素 1 >，< 元 素 2>, < 元 素 3>, ...); 


当 使 用 这 些 参 数 来 新 建 数 组 对 象 时 ,构造 函数 将 用 参数 值 作为 新 建 数 组 的 元 素 值 ,数组 
对 象 的 length 属性 也 会 被 设置 为 参数 的 个 数 。 

例如 ,var myArray 二 new Array(1,， 4.5,， "Hi "); 新 建 一 个 数组 对 象 myArray ,数组 
包含 的 元 素 分 别 是 : myArray[0] 三 1; myArray[1] = 4.5; myArray[2] = "Hi "。 

但 是 ,如 果 元 素 列表 中 只 有 一 个 元 素 ,而 这 个 元 素 又 是 一 个 正 整 数 的 话 , 这 将 定义 一 个 
包含 正 整数 个 空 元 素 的 数组 。 例 如 ,var myArray 王 new array(10) ,定义 一 个 长 度 为 10 的 
数组 ,而 不 是 一 个 数组 ,包含 一 个 正 整数 元 素 10。 

2. 多 维 数组 

JavaScript 只 有 一 维 数 组 ,不 能 和 一 般 的 程序 设计 语言 一 样 ,使 用 类 似 var myArray 一 
new Array(3,4) 的 方法 来 定义 3X4 的 二 维 数组 ,或 者 用 myArray[1,1] 来 访问 “二 维 数组 ” 
中 的 元 素 。 实 际 上 ,所 谓 多 维 数组 ,就 是 数组 的 元 素 本 身 也 是 一 个 数组 。 因 此 ,要 使 用 多 维 
数组 ,在 JavaScript 中 ,可 用 下 面 的 形式 来 定义 : 

var myArray = new Array(new Array(), new Array(), new Array(), ...); 

例如 : 要 定义 一 个 3X4 的 二 维 数组 ,定义 如 下 : 

var myArray = new Array(new Array(4), new Array(4), new Array(4)); 

然后 ,可 以 用 myArray[ij[jj 的 形式 访问 “二 维 数组 ”中 的 元 素 。 

在 JavasCript 中 ,数组 中 的 元 素 可 以 是 不 同类 型 的 ,因此 可 以 定义 oneArray 一 new 
Array(new Array(3), new Array(4)), 它 不 是 一 个 3X4 的 二 维 数组 ,实际 上 oneArray 有 
两 个 元 素 ,第 一 个 元 素 是 一 个 长 度 为 3 的 数组 ,第 二 个 元 素 是 一 个 长 度 为 4 的 数组 。 

3. Array 对 象 属 性 

Array 对 象 常用 的 属性 是 length 属性 ,保存 数组 的 长 度 , 即 数组 里 元 素 的 个 数 , 它 等 于 
数组 里 最 后 一 个 元 素 的 下 标 加 1。 因 此 , 想 添加 一 个 元 素 ,可 写 做 : myArrayLmyArray. 
length] 二 ...。 对 于 二 维 数组 ,例如 上 面 的 myArray,document. write(myArray. length) 将 
返回 3 ,而 不 是 返回 3X4 二 12。 也 就 是 说 myArray 有 3 个 元 素 ,都 是 长 度 为 4 的 数组 。 

4. Array 对 象 方法 

对 于 Array 对 象 ,不 同 的 浏览 器 支持 不 完全 相同 ,下 面 是 一 组 常用 的 Array 对 象 方法 ， 
见 表 5-9。 


方 法 名 


表 5-9 Array 对 象 常用 方法 
功 能 





slice(<s>[, <e>]) 


返回 一 个 从 第 s 个 元 素 到 第 e 个 元 素 的 一 个 子 数组 ,如 果 不 给 出 e, 则 返回 的 子 
数组 从 第 s 个 元 素 到 数组 的 最 后 一 个 元 素 











shift() 删除 并 返回 数组 的 第 一 个 元 素 
pop() 删除 并 返回 数组 的 最 后 一 个 元 素 
push() 向 数组 的 末尾 添加 一 个 或 多 个 元 素 , 并 返回 新 的 长 度 





unshiftCel ,e2,.... ) 





向 数组 的 开头 添加 一 个 或 多 个 元 素 ,并 返回 新 的 长 度 











a。concat(al,a2,...) | 将 数组 al ,a2,… 中 的 元 素 添加 到 数组 a 中 
reverse() 颠倒 数组 中 元 素 的 顺序 
sort() 对 数组 中 的 元 素 进行 排序 





toString() 


把 数组 转换 为 字符 串 ,并 返回 结果 





join(< 分 隔 符 >) 


例如 : 





把 数组 中 的 各 个 元 素 串 起 来 ,用 < 分 隔 符 > 作 为 元 素 之 间 的 分 隔 符 , 然 后 返回 这 
个 字符 串 


< script type = "text/javascript"> 


new Rrray(2) 


Var aa= 

aa[0] = "George" 
aa[1] = "John" 

var bb = new Array(3) 
bb[0] = "James" 
bb[1] = "Adrew" 
bb[2] = "Martin" 


document. write(aa. concat (bb)) 


</script > 


在 JavaScript 中 ,可 以 直接 输出 一 个 数组 对 象 ,例如 document. write(aa), 则 输出 数组 
中 的 每 一 个 元 素 的 值 ,元 素 值 之 间 用 逗号 分 开 。 


5.5.6 全 局 函数 


在 软件 编程 时 ,除了 内 置 对 象 外 ,还 有 一 些 功 能 是 经 常 需要 使 用 的 ,这 些 功能 被 定义 为 
标准 函数 ,又 称 内 置 函数 。 内 置 函 数 不 属 于 任何 对 象 , 因 此 不 用 通过 引用 对 象 的 方式 来 使 用 
它们 , 称 为 JavaScript 全 局 函数 。 常 用 的 全 局 函数 见 表 5-10。 


函 数 名 


表 5-10 JavaScript 全 局 函数 
说 明 





parselnt(str, radix) 


解析 一 个 字符 串 ,并 返回 一 个 整数 。 参 数 str 为 要 被 解析 的 字符 串 ,参数 radix 表 
示 要 解析 的 数字 的 基数 ,范围 为 2 一 36 

















parseFloat(str) 


解析 一 个 字符 串 ,返回 字符 串 中 的 第 一 个 数字 。 如 果 字 符 串 的 第 一 个 字符 不 能 
被 转换 为 数字 ,返回 NaN 








Number(object) 





把 对 象 值 转换 为 数字 。 如 果 参 数 是 Date 对 象 ,Number() 返 回 从 1970 年 1 月 1 
日 至 今 的 毫秒 数 。 如 果 对 和 象 的 值 无 法 转换 为 数字 , 则 返回 NaN 
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续 表 
i 
isNaN(x) 检查 参数 x 是 否 是 非 数字 值 。 如 果 x 是 非 数字 值 NaN, 返 回 true。 如 果 x 是 其 
他 值 , 则 返回 false 
eval(str) 将 字符 串 参数 str 看 作 一 个 JavaScript 表达 式 ,并 把 它 作 为 脚本 代码 来 执行 ,如 


果 有 计算 结果 , 则 返回 计算 结果 





String(obj) 


把 参数 obj 对 象 转换 为 字符 串 。 参 数 obj 为 JavaScript 对 象 





isFinite(num) 


检查 参数 num 是 否 无 穷 大 。 如 果 是 有 限 数字 ,返回 true。 否 则 ,如 果 是 NaN( 非 
数字 ) \ 正 、 负 无 穷 大 的 数 ,返回 false 





encodeURI(str) 


把 字符 串 str 作为 URI 进行 编码 并 返回 URI 编码 ,其 中 革 些 字符 被 十 六 进 制 的 转 义 
序列 替换 。 如 果 str 中 含有 分 隔 符 ,比如 ? 和 直 , 则 应 当 使 用 encodeURIComponent() 
方法 分 别 对 各 组 件 进行 编码 





encodeURIComponent 


(str) 


把 字符 串 str 作为 URI 组 件 进行 编码 。 参 数 str 含有 URI 组 件 或 其 他 要 编码 的 
文本 





decodeURI( URIstr) 


对 encodeURIO 函数 编码 过 的 URI 进行 解码 ,返回 解码 后 的 字符 串 , 其 中 的 十 六 
进 制 转 义 序列 将 被 它们 表示 的 字符 替换 





decodeURIComponent 
(URIstr) 





对 encodeURIComponent() 函 数 编码 的 URI 进行 解码 


【 例 5-5】 JavaSeript 字符 串 函 数 eval() 常 常用 于 动态 地 得 到 变量 名 的 操作 ,阅读 下 列 


代码 ,分 析 运 行 结 果 。 


< script type = "text/javascript"> 


Var Scorel = 97; 
var Score2 = 100; 
for (i=0;i<2;i+ 


{ 


> 


valstr= "score" + (i+1); // 构 造 变 量 名 


document. write 


} 
</script > 


("valstr="+eval(valstr) + "<br>"); 


上 述 代 码 中 ,声明 了 两 个 整数 变量 ,用 循环 语句 输出 它们 的 值 .在 循环 中 构造 变量 名 , 通 


过 卫 数 eval(str) 来 得 


到 一 个 JavaScript 代码 计算 。 


5.6 浏览 器 对 象 


每 一 个 符合 ECMAScript 规范 的 脚本 程序 设计 语言 都 包含 三 个 部 分 , 即 ECMAScript 
规范 ,浏览 器 对 象 模型 (Browser Object Model, BOM) 和 文档 对 象 模 型 (Document Object 


Model, DOM) 。 所 谓 


浏览 器 对 象 模型 BOM, 就 是 指 当 用 户 打开 浏览 器 时 ,浏览 器 中 的 


JavaScript 运行 时 引擎 将 在 内 存 中 自动 创建 一 组 对 象 , 用 于 对 浏览 器 及 HTML 文档 对 象 模 
型 中 数据 的 访问 和 操作 。 因 为 这 些 对 象 是 和 浏览 器 本 身 紧 密 相 关 的 , 故 称 为 浏览 器 对 象 。 


5.6.1 浏览 器 对 象 模型 BOM 
当 使 用 浏览 器 打开 一 个 网 页 时 ,浏览 器 就 在 内 存 中 创建 了 一 个 窗口 对 象 (window) , 它 


封装 了 浏览 器 的 整个 窗口 ,如 果 文 档 中 包含 框架 (frame 或 iframe 元 素 ) ,浏览 器 还 会 为 每 个 
框架 创建 一 个 子 window 对 象 。 在 一 个 窗口 中 ,包含 了 窗口 标题 ,地 址 栏 、 客 户 区 、 状 态 栏 
等 ,它们 也 被 定义 为 独立 的 浏览 器 对 象 ,都 是 window 对 象 的 成 员 对 象 ,这 些 对 象 构成 一 种 
层次 结构 , 即 浏览 器 对 象 模型 。 
在 JavaScript 中 ,根据 窗口 的 构成 ,定义 的 浏览 器 对 象 及 层次 结构 如 图 5-8 所 示 。 
window 对 象 
| 
| | | 


history 对 象 location 对 象 document 对 象 navigator 对 象 。 screen 对 象 





图 5-8 浏览 器 对 象 模型 BOM 层次 结构 


在 浏览 器 对 象 模型 的 7 个 对 象 中 , window 对 象 是 最 顶层 的 对 象 , 它 对 应 了 浏览 器 窗口 
本 身 , 其 他 6 个 对 象 都 是 window 对 象 的 成 员 对 象 (对 象 名 的 首 字 母 均 为 小 写字 母 ), 其 中 
document 成 员 对 象 也 是 HTML 文档 对 象 模 型 DOM 中 的 重要 对 象 。 浏 览 器 对 象 模 型 中 的 
每 一 个 对 象 都 是 预 声明 的 内 存 对 象 ,用 户 可 以 直接 使 用 。 


5.6.2 窗口 对 象 window 


当 浏 览 器 打开 一 个 网 页 文件 ,如 果 新 建 了 一 个 浏览 器 窗口 , 则 在 计算 机 内 存 中 创建 一 个 
窗口 对 象 ,对 象 名 为 window。 在 客户 端 , window 对 象 是 全 局 对 象 , 所 有 的 表达 式 都 在 当前 
的 环境 中 计算 。 也 就 是 说 ,要 引用 当前 窗口 不 需要 指定 窗口 对 象 本 身 ,而 是 可 以 把 window 
对 象 的 属性 作为 全 局 变量 来 使 用 。 例 如 ,可 以 将 window. document 简写 为 document， 
window. alert() 可 以 简写 为 alert() 一 样 。 这 是 对 窗口 对 象 的 隐 式 应 用 ,如 果 要 显 式 地 表明 
窗口 ,可 写 为 window.[ 属 性 | 方法 ] 或 self. [属性 | 方法 ] 。 

一 个 window 对 象 封 装 了 浏览 器 窗口 的 全 部 内 容 , 从 浏览 器 窗口 可 以 很 容易 地 理解 
window 对 象 包含 的 属性 和 方法 。 例 如 : 一 个 浏览 器 窗口 都 包括 : 标题 栏 、 前 进 后 退 按钮 、 
地 址 栏 、 客 户 区 、 深 动 条 、 状 态 栏 等 。 这 些 窗口 元 素 构成 了 window 对 象 的 成 员 , 为 操作 方 
便 , 许 多 成 员 本 身 又 被 封装 为 对 象 , 构 成 window 对 象 的 成 员 对 象 。 

1. window 对 象 常 用 属性 

window 对 象 的 属性 可 分 为 一 般 属性 和 对 象 属性 ,对 于 每 一 个 属性 ,具有 不 同 的 读 写 权 
限 , 即 有 的 属性 为 只 读 属性 ,不 能 为 属性 进行 赋值 .有 的 属性 则 可 以 进行 读 写 操作 。window 
对 象 一 般 属性 及 成 员 对 象 见 表 5-11。 


表 5-11 window 对 象 属性 表 

















属 性 名 说 明 
name 窗口 名 称 ,窗口 名 称 可 以 用 作 一 个 < a > 或 者 < form > 标记 的 target 属性 值 
window ,self 指向 当前 窗口 ,相当 于 this 
封装 浏览 器 窗口 中 “前 进 ”“ 后 退 ? 按 钮 ,包含 用 户 在 当前 浏览 器 窗口 中 访问 过 

history 
的 URL 

和 封装 浏览 器 窗口 的 地 址 栏 ,将 一 个 网 址 赋 给 location 属性 ,该 网 页 将 在 浏览 器 窗 
口 打开 

document 封装 浏览 器 窗口 打开 的 HTML 文档 ,是 DOM 模型 的 根 








客户 六 编 程 


震中 恰 


Web 项 术 时 论 ( 获 荆 虎 ) 





























续 表 
属 性 名 说 明 

defaultStatus status 封装 浏览 器 窗口 状态 栏 ,属性 值 可 读 写 

i 如 果 window 中 包含 帧 , 则 frames 为 一 个 数组 对 象 ,保存 每 个 帧 对 应 的 子 窗口 。 
可 以 通过 window. frames[ "frame-name"] 或 数组 下 标 0..n 来 访问 子 窗口 对 象 

opener 创建 此 窗口 的 父 窗口 引用 

top 顶级 窗口 指针 

到 窗口 是 否 关闭 标志 。 当 浏览 器 窗口 关闭 时 ,该 窗口 对 应 的 windows 对 象 并 不 会 
消失 , 它 的 closed 属性 为 true 

innerHeight 窗口 中 文档 显示 区 域 的 高 度 和 宽度 ,不 包括 菜单 栏 .工具 栏 等 部 分 。IE 对 应 的 

innerWidth 属性 是 body 对 象 的 clientHeight、clientWidth 属性 

screenTop screenLeft | 窗口 距离 屏幕 顶部 和 左 侧 的 距离 , 即 窗口 左上 角 的 x、y 坐标 


【 例 5-6】 编写 一 个 网 页 文件 1. htm ,确保 不 被 嵌入 到 一 个 框架 中 打开 。 
分 析 : 利用 window 对 象 的 self 和 top 属性 可 以 判断 窗口 是 否 在 一 个 框架 中 ,如 果 是 ， 
则 跳出 框架 ,代码 如 下 : 


<html > 

<head > 

<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 

</head> 

<body > 

< script type = "text/javascript"> 
if (window. top!= window. self) { 

window. top. location= "1. htm" 

' 

</script > 

</body > 

</html > 


2. window 对 象 常用 方法 
浏览 器 对 象 window 的 常用 方法 见 表 5-12。 
表 5-12 ”window 对 象 常用 方法 
这 说 明 





打开 一 个 新 浏览 器 窗口 ,并 返回 该 窗口 对 象 。 

URL ,可 选 参数 ,新 窗口 中 要 显示 的 文档 的 URL, 取 值 为 空 时 ,新 窗口 
不 显示 任何 文档 。 

Name, 可 选 参数 .新 窗口 名 称 。 如 果 该 参数 指定 了 一 个 已 经 存在 的 窗 
口 , 那 么 open() 方 法 不 再 创建 一 个 新 窗口 ,而 返回 对 指定 窗口 的 引用 。 

Features, 可 选 参数 ,设置 窗口 特征 


open( URL, Name, Features) 





关闭 浏览 器 窗口 ,只 有 通过 JavaScript 代码 打开 的 窗口 才能 够 由 








lose() 

JavaScript 代码 关闭 ,这 阻止 了 恶意 脚本 终止 用 户 的 浏览 器 

focus() 将 键盘 焦点 设置 到 一 个 窗口 

es 把 键盘 焦点 从 顶层 浏览 器 窗口 移 走 , 整 个 窗口 由 Window 对 象 指定 。 





哪个 窗口 最 终 获 得 键盘 焦点 并 没有 指定 




















方 法 说 明 
moveTo(x,y) 把 窗口 的 左上 角 移动 到 一 个 指定 的 坐标 (x,y) 处 
moveBy(x,y) 相对 窗口 的 当前 坐标 把 它 在 x,y 方向 移动 指定 的 像素 
resizeTo( width, height) 将 窗口 的 宽度 和 高 度 调整 为 width 和 height 个 像素 
resizeBy( width, height) 将 窗口 的 宽度 和 高 度 增 大 或 减少 width 和 height 个 像素 
将 浏览 器 窗口 左上 角 定 位 到 文档 区 域 的 (x,y) 坐 标 位 置 ,文档 上 边 和 左 


scrollTo(x, 
Wi 边 的 部 分 将 滚动 出 浏览 器 窗口 





Ee 将 济 览 器 窗 口 左上 角 分 别 向 右 . 向 下 滚动 xnum 和 ynum 像素 

按 指定 周期 (毫秒 ) 调 用 函数 或 计算 表达 式 。 

setInterval(code, millisec) code, 必 选 参 数 ,要 调用 的 函数 或 要 执行 的 代码 串 。 

millisec, 周 期 性 执行 或 调用 code 函数 的 时 间 间 隔 , 以 毫秒 计 

在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 。 参 数 同 setInterval( )， 
setTimeout() setTimeout() 只 执行 code 一 次 。 如 果 要 多 次 调用 ,请 使 用 setInterval() 
或 者 让 code 自身 再 次 调用 setTimeout() 

取消 由 setInterval() 设 置 的 timeout。 参 数 id 必须 是 由 setInterval() 返 


scroll(xnum, ynum) 











clearInterval(id) 








回 的 ID 值 
clearTimeout(id) 可 取消 由 setTimeout() 方 法 设置 的 timeout 
alert(message) 显示 带 有 一 条 指定 消息 和 一 个 “确定 ”按钮 的 警告 框 





显示 一 个 带 有 指定 消息 和 “确定 “取消 ”按钮 的 对 话 框 。 如 果 用 户 单 击 
“确定 ”按钮 , 则 confirm() 返 回 true, 和 否则 返回 false 
print() 打印 当前 窗口 的 内 容 。 类 似 用 户 单 击 浏览 器 的 “打印 "按钮 


confirm(message) 








在 window 对 象 的 方法 中 ,方法 scrollTo O 〇 和 scrollBy() 比较 难 理解 。 我 们 说 scrollTo (x,y) 
中 (x,y) 是 浏览 器 窗口 左上 角 在 文档 区 域 中 的 (x,y) 坐标 。 这 听 起 来 比较 擂 口 ,其 实 文档 和 
观察 文档 的 浏览 器 窗口 的 移动 是 相对 的 。 当 我 们 拖 动 滚动 条 的 时 候 , 好 像 窗 口 不 动 ,文档 在 
动 。 如 果 说 文档 不 动 ,窗口 在 动 ,其实 结果 是 一 样 的 。 后 一 种 情况 虽然 难 理解 ,但 更 加 符合 
实际 。 
通常 情况 下 ,文档 的 尺寸 (宽度 和 高 度 ) 随 着 文档 内 容 的 多 少 而 变化 。 但 是 ,我 们 也 可 以 
设置 一 个 很 大 的 文档 区 ,例如 : body{height: 10000px;width: 10000px;} ,文档 的 实际 内 容 
其 实 没有 这 么 宽 和 这 么 高 , 它 位 于 10000X10000 区 域 的 左上 部 。 通 过 scrollTo (x,y) 可 以 将 浏 
览 器 窗口 左上 角 定位 到 10000X10000 区 域 的 某 个 位 置 ,这 和 拖 动 滚动 条 的 效果 是 一 样 的 。 
对 于 setInterval() 和 setTimeout() 两 种 方法 ,前 者 定义 周期 性 执行 的 函数 更 加 方便 ,不 
需要 递归 调用 接口 实现 。 例 如 ,下 列 脚本 程序 可 以 在 页 面 中 显示 一 个 走动 的 时 钟 ; 
< script type= "text/javascript"> 
var clockid = self. setInterval("clock( )",1000); 
function clock() 
{ 
var nowtime = new Date( ); 
forml. clock. value = nowtime. toTimeString( ). substring(0, 8); 


} 
</script > 
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当 打 开 一 个 窗口 时 ,可 设置 的 窗口 特征 见 表 5-13。 
表 5-13 窗口 特征 列表 
































特 征 说 明 
top, left 窗口 左上 和 角 坐 标的 像素 值 
height, width 窗口 的 高 度 和 宽度 
titlebar 是 否 显示 标题 栏 , 取 值 为 yes|no|110。 默 认 值 为 yes 
menubar 是 否 显示 菜单 栏 , 取 值 为 yes|no|110。 默 认 值 为 yes 
toolbar 是 否 显示 浏览 器 的 工具 栏 , 取 值 为 yeslno|110。 默 认 值 为 yes 
location 是 否 显示 地 址 字段 , 取 值 为 yxes|no|110。 默 认 值 为 yes 
status 是 否 添 加 状态 栏 , 取 值 为 yes|no|110。 默 认 值 为 yes 
scrollbars 是 否 显示 滚动 条 , 取 值 为 yes|no|1|0。 上 默认 值 为 yes 
resizable 窗口 是 否 可 调节 尺寸 , 取 值 为 yes| no|1|0。 默 认 值 为 yes 
fullsereen 是 否 使 用 全 屏 模 式 显示 浏览 器 。 默 认 值 为 noo。 处 于 全 屏 模 式 的 窗口 必须 同时 
处 于 剧院 模式 





【 例 5-8】 当 在 浏览 器 中 打开 一 个 页 面 时 ,如 果 文 档 长 度 大 于 浏览 器 窗口 的 高 度 , 则 出 
现 垂 直 滚 动 条 ,编写 代码 ,使 得 窗口 深 动 条 置 于 窗口 的 底部 。 

分 析 : 这 是 在 实际 项 目 研发 中 常用 的 功能 , 它 可 能 是 单 击 上 部 一 个 按钮 ,在 文档 尾部 添 
加 了 一 条 记录 ,应 该 自动 地 定位 到 文档 底部 。 

代码 清单 : 


<html> 
<head> 
<meta charset = "utf - 8"> 
<style> 
#divi{ 
position:absolute; 
top: 10px; 
left:10px; 
width:100%; 
background - color: # ff0000; 
border :1px solid # 00ff00; 
} 
# div2{ 
width:70 %; 
height :100 %; 
overflow:auto; 
} 
</style> 
< Script type = text/javascript > 
function gobottom( ) 
{ 
// 将 窗口 的 滚动 条 定位 到 页 面 底部 ,本 处 未 用 到 
var c = window. document. body. scrollHeight; 
window. scrollBy(0, c); 
// 将 div 的 滚动 条 移动 到 底部 
Var divobj = document. getElementBYId( 'div2'); 
divobj. scrollTop = divobj. scrollHeight; 


} 
function gotop() 
{ 

window. scrollTo(0,0); 

document. getElementById( 'div2'). scrollTop = 0; 
} 
</script > 
</head > 
<body > 
<div id= "div1"> 
< input type = "button" name = "bl”value = " 深 动 条 置 底 " onclick = "gobottom();"> 
</div> 
<div id = "div2"> 
< script type = "text/javascript"> 
for (i=1;i<50;i++) 

window. document.write("Line" + i+ "<br>"); 

</script > 
<a href =" 井 " onclick = "gotop() ;return false;"> 回 顶部 </a> 
</div> 
</body> 
</html > 


在 浏览 器 中 打开 上 述 页 面 ,显示 结果 如 图 5-9 所 示 。 














图 5-9 滚动 条 置 底 操 作 页 面 


在 上 述 代码 中 ,有 三 个 在 实际 项 目 研 发 中 遇 到 的 重要 的 技术 难点 ,解释 如 下 

(1) 滚动 条 有 两 种 情况 ,一 种 是 窗口 滚动 条 ,一 种 是 div 滚动 条 。 在 图 5-9 中 我 们 看 到 
滚动 条 是 div2 的 滚动 条 。 为 什么 窗口 没有 出 现 滚动 条 呢 ? 这 是 与 div 的 样式 定义 中 设置 了 
height:100% 有关。 如 果 删 除 div 的 height 属性 设置 . 则 会 出 现 窗 口 滚 动 条 ,而 div2 不 出 现 
滚动 条 。 因 为 , 当 设 置 了 div2 的 height 属性 后 , 它 不 会 超过 窗口 的 高 度 ,因此 ,窗口 不 会 出 
现 滚动 条 。 但 是 ,如 果 没 有 设置 高 度 , 则 div2 的 高 度 是 变化 的 , 当 内 容 超 过 窗口 高 度 时 , 窗 
口 自然 会 出 现 滚动 条 ,但 div2 不 会 出 现 滚动 条 ,因为 div2 并 未 设置 高 度 。 

(2) 滚动 条 置 底 ,通常 情况 下 ,滚动 条 会 出 现在 窗口 和 div 中 ,在 窗口 中 ,可 以 比较 容易 
地 控制 滚动 条 的 位 置 , 即 通过 gobottom() 函 数 中 的 window. scrollBy(0,c) 即 可 实现 。 
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(3) 将 div 块 固 定 , 不 随 滚 动 条 的 滚动 而 滚动 , 且 不 闪烁 。 在 通常 情况 下 , 当 拖 动 窗口 
滚动 条 时 ,div 块 也 会 随 着 滚动 条 的 滚动 而 滚动 。 如 何 让 一 个 div 块 不 会 随 滚 动 条 而 滚动 
呢 ? 方法 就 是 将 < body > 分 成 两 个 div ,一 个 输出 固定 不 动 的 内 容 , 另 一 个 是 其 他 内 容 。 如 
上 面 代码 中 的 divl 和 div2。 然 后 ,设置 div2 块 的 height:100% ,这 样 窗口 就 不 会 出 现 垂直 


滚动 条 了 。 


当 div2 中 的 输出 内 容 超过 div2 设置 的 高 度 时 , 则 < div > 出 现 垂直 滚动 条 ,看 上 去 类 似 
窗口 的 滚动 条 ,移动 div2 的 滚动 条 ,当然 不 会 影响 divl ,这 样 就 看 到 divl 是 固定 不 动 的 。 此 
外 ,还 可 以 将 div 的 zindex 设置 为 一 1 ,使 得 在 有 多 个 图 层 琶 加 时 ,该 div 处 于 底层 。 处 于 底 
层 的 div 中 的 输入 元 素 不 能 获得 输入 焦点 。 


5.6.3 地 址 栏 对 象 location 


所 有 Web 浏览 器 都 包含 地 址 栏 , 这 是 用 户 输入 网 址 的 地 方 。 在 JavaScript 中 ,浏览 器 
窗口 的 地 址 栏 被 封装 成 location 对 象 , 它 是 window 对 象 的 成 员 对 象 。 地 址 栏 对 象 location 
封装 了 浏览 器 窗口 的 地 址 栏 ,其 常用 属性 和 方法 见 表 5-14。 


表 5-14 location 对 象 常用 属性 


























属 性 名 说 明 
href 存储 地 址 栏 网 址 URL, 可 以 通过 为 该 属性 设置 新 的 URL ,浏览 器 将 打开 新 的 网 页 
protocol 存储 URL 中 的 协议 部 分 ,包括 后 面 的 冒号 (:) 
hostname 存储 URL 中 的 主机 名 十 域名 部 分 ,不 包括 端口 号 
host 存储 URL 的 主机 名 和 端口 号 ,只 有 端口 号 是 URL 的 一 个 明确 部 分 时 , 值 中 才 包 括 端口 号 
port 存储 URL 的 端口 部 分 

存储 URL 中 文件 路 径 。 如 果 URL 中 的 网 页 文件 是 根 下 的 一 个 文件 , 则 location. pathname 
pathname 的 值 为 根 (/) 
hash 该 字符 串 是 URL 的 书签 部 分 (从 # 号 开始 的 部 分 ) 
search 存储 URL 的 中 间 号 (*“?”) 之 后 的 部 分 , 即 参 数 部 分 





在 上 述 属性 中 ,可 以 看 出 location 对象 属性 可 以 分 别 获 取 一 个 URL 的 各 个 部 分 ,这 些 
属性 都 可 以 读 写 , 从 而 可 以 在 当前 窗口 打开 新 的 网 页 。 
Location 对 象 方 法 见 表 5-15。 


方法 


表 5-15 location 对 象 常用 方法 
说 明 





assign( URL) 


把 一 个 新 的 URL 赋 给 当前 窗口 的 location 对 象 , 即 在 当前 窗口 打开 一 个 新 的 网 
页 。 也 可 以 通过 为 location. href 赋值 来 导航 到 一 个 新 的 网 页 ,采用 assign 的 方 
法 会 使 代码 易 维护 





reload([ true|false]) 


如 果 参 数 设 为 true, 则 从 服务 器 上 重新 下 载 网 页 ,等 价 于 单 击 浏览 器 刷新 
(refresh) 按 钮 

如 果 参 数 是 false, 检 测 服务 器 上 的 文档 是 否 已 改变 ,如 果 文 档 已 改变 , 则 再 次 下 
载 该 文档 。 如 果 文 档 未 改变 , 则 该 方法 将 从 缓存 中 装载 文档 





replace(newURL) 


用 一 个 新 文档 取代 当前 文档 。 不 会 在 history 对 象 中 生成 一 个 新 的 记录 ,新 的 
URL 将 覆盖 istory 对 象 中 的 当前 记录 





例如 : 下 面 代码 定义 一 个 超 链接 , 单 击 , 则 在 当前 窗口 打开 一 个 新 的 网 页 。 


<a href ="#" onclick= "window. location.assign('http://www.google. com')"> Google 搜索 </a> 


【 例 5-9】 利用 location 对 象 ,在 htm 页 面 中 ,编写 一 个 函数 获取 并 输出 传人 的 参数 名 
及 参数 值 。 

分 析 : 在 HTML 中 , 当 打 开 一 个 网 页 时 :经 常会 传人 相应 的 参数 ,如 果 调 用 的 是 服务 器 
页 面 ( 如 JSP 页 面 ) ,在 服务 器 页 面 可 以 通过 服务 端的 request. getParameter() ;程序 来 获取 
页 面 中 的 参数 ,这 和 表单 数据 的 获取 相同 。 如 果 调 用 的 是 htm 文档 , 则 需要 通过 客户 端的 
location 对 象 来 获取 ,并 且 需 要 使 用 类 。 

假设 有 两 个 页 面 1. htm 和 2. htm, 在 1. htm 中 ,定义 了 一 个 超 链接 : 


<a href = "2. html?username = jane&age = 18" target =" blank"> test parameter </a> 


在 网 页 2. htm 中 ,如 何 获取 传人 的 参数 呢 ? 因为 2. htm 不 是 一 个 服务 器 页 ,无 法 像 服 
务 器 页 那样 ,来 获取 客户 端 中 的 表单 数据 和 URL 参数 。 在 客户 端 要 获取 传人 的 参数 ,需要 
在 2. htm 中 定义 一 个 求 传人 参数 的 类 ,来 解析 URL 中 的 参数 表 , 然 后 将 解析 后 的 参数 名 称 
和 参数 值 ,在 当前 页 面 创建 为 内 存 变量 。 

页 面 2. html 代码 清单 : 


<!DOCTYPE html > 

<html > 

<head> 

<meta charset = "utf - 8"> 

< script type = "text/javascript"> 
function GetParaString() 

{ 


var pname, pvalue, i = 0; 


var str = window. location. href; // 获 取 浏 览 器 地 址 栏 URL 串 
var num = str. indexOf("?") 

str= str. substr(num + 1); // 截 取 "?" 后 面 的 参数 串 

var parray = str. split("g&"); // 将 各 参数 分 离 形 成 参数 数组 


for (i=0;i<parray.length;i++) 
{ 
num= parray[i]. indexOf(" = "); 
if (num>0) { 
pname = parray[i]. substring(0, num); // 取 参数 名 
pvalue = parray[i]. substr(num+1);  // 取 参数 值 
this[pname] = pvalue; // 定 义 对 象 属性 并 初始 化 


} 
} 


function showPara(obj) 
{ 
for(var prop in obj) 


document. write(prop+ ":"+obj[prop]+ "<br >"); 
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} 

</script > 

</head > 

<body> 

<p> 传 人 参数 为 : </p> 

< script type = "text/javascript"> 


var Request = new GetParaString(); // 创 建 参数 对 象 实 例 
var myname = Request["username"]; // 取 传 入 的 参数 username 
var myage = Request["age"]; // 取 传人 的 参数 age 
showPara( Request); 

</script > 

</body > 

</html > 


上 述 代码 完成 后 ,进行 测试 : 在 1. htm 中 , 单 击 超 链接 “test parameter”, 则 打开 一 个 新 
窗口 ,显示 2. html, 在 页 面 的 项 部 ,显示 传人 的 参数 名 和 参数 值 。 


5.6.4 显示 屏 对 象 screen 


在 客户 端 编程 中 ,常常 需要 获取 用 户 计算 机 显示 器 的 有 关 信 息 。 在 JavaScript 中 ,用 户 
计算 机 显示 屏 的 信息 被 封装 在 screen 对 象 中 。JavaScript 程序 可 以 利用 这 些 信息 来 优化 输 
出 ,以 达到 显示 要 求 。Screen 对 象 常用 属性 见 表 5-17 

表 5-17 Screen 对 象 属性 











属 性 描述 
availHeight,availWidth 存储 显示 器 屏幕 可 用 的 高 度 和 宽度 的 像素 数 
height, width 存储 显示 器 屏幕 的 高 度 和 宽度 的 像素 数 


除了 上 述 属性 外 ,screen 对 象 还 有 一 组 与 分 辨 率 、 色 彩 有 关 的 属性 ,在 此 省 略 。 此 外 ,和 
其 他 对 象 不 同 ,screen 对 象 没 有 提供 方法 。 

由 于 现在 的 大 多 数 Web 浏览 器 都 采用 标签 式 页 面 管理 .这些 页 面 窗口 都 被 组 织 在 浏览 
器 窗口 中 ,这 使 得 网 页 的 切换 和 关闭 变 得 容易 。 在 标签 式 页 面 组 织 模式 下 ,如 果 在 一 个 窗口 
通过 window. open() 方 法 动态 地 打开 一 个 新 窗口 .不 管 如 何 设置 新 建 窗口 的 属性 ,或 者 移 
动 新 窗口 的 位 置 ,以 及 对 窗口 放大 缩小 等 操作 ,将 都 不 生效 ,而 是 和 其 他 窗口 一 样 作为 一 个 
页 面 标签 ,出 现在 浏览 器 窗口 中 。 


5.6.5 浏览 器 对 象 navigator 


随 着 浏览 器 产品 的 增多 ,网 页 在 不 同 浏览 器 中 可 能 会 显示 不 同 。 因 为 不 同 的 浏览 器 对 
HTML 和 JavaScript 的 支持 不 完全 相同 。 为 了 保证 设计 的 网 页 在 大 多 数 主 流 浏 览 器 中 都 
能 够 正确 地 显示 ,不 仅 要 使 用 通用 和 更 加 规范 的 JavaScript 代码 ,常常 还 需要 获取 用 户 打开 
网 页 时 使 用 的 浏览 器 信息 。 

在 JavaScript 的 BOM 中 ,客户 浏览 器 信息 被 封装 为 一 个 浏览 器 对 象 , 即 navigator 对 
象 , 它 封 装 了 有 关 操 作 系 统 、 浏 览 器 版 本 等 环境 信息 , navigator 对 象 常用 属性 及 方法 见 
表 5-18。 


表 5-18 ”navigator 对 象 属性 及 方法 


























属 性 
plugins[ ] 数组 成 员 ,存储 浏览 器 已 经 安装 的 插件 
appName 存储 浏览 器 名 称 字符 串 
appVersion 存储 浏览 器 版 本 号 和 操作 系统 信息 ,不同 的 浏览 器 显示 的 内 容 项 目 不 同 
appMinorVersion 存储 浏览 器 的 次 级 版 本 
appCodeName 浏览 器 代码 名 称 
Platform 存储 客户 端 操作 系统 平台 
方 法 
javaEnabled() 检查 浏览 器 是 否 支 持 并 启用 了 Java。 如 果 是 ,返回 true, 否则 返回 false 





5.7 HTML 文档 对 象 


当 浏 览 器 打开 一 个 网 页 时 ,不 管 是 HTML 还 是 XML 文档 ,浏览 器 在 显示 文档 的 同时 ， 
浏览 器 中 的 JavaScript 运行 时 引擎 同时 还 为 每 一 个 元 素 在 内 存 中 创建 一 个 内 存 对 象 , 称 为 
文档 对 象 。 在 JavaScript 中 ,文档 对 象 构成 了 网 页 的 编程 接口 ,通过 对 这 些 可 访问 的 内 存 对 
象 进行 编程 ,从 而 实现 对 网 页 中 元 素 及 其 属性 的 访问 和 修改 ,增强 网 页 的 交互 功能 。 


5.7.1 文档 对 象 模型 DOM 


文档 对 象 (Document Objectb) 是 浏览 器 在 打开 网 页 的 过 程 中 ,对 每 一 个 元 素 在 内 存 中 创 
建 的 对 象 , 它 封装 了 网 页 元 素 的 属性 和 方法 。 对 应 网 页 元 素 的 层次 结构 ,文档 对 象 也 形成 一 
种 对 应 的 层次 关系 ,以 树 状 结构 组 织 ,构成 一 棵 文档 树 。 

为 了 更 好 地 规范 文档 对 象 编程 , W3C 发 布 了 文档 对 象 模型 (Document Object Model， 
DOMD) 规 范 ,以 解决 不 同 的 浏览 器 厂商 在 脚本 语言 实现 中 的 冲突 和 标准 化 问题 。DOM 为 
Web 应 用 的 前 端 开 发 提供 了 一 套 标 准 方法 ,遵循 DOM 规范 ,客户 端 脚本 程序 将 具有 更 好 的 
兼容 性 ,从 而 保证 网 页 在 不 同 浏览 器 中 的 显示 更 加 一 致 。 

W3C 将 DOM 分 为 三 个 不 同 的 部 分 , 即 核心 DOM XML DOM 和 HTML DOM。 核 心 
DOM 是 用 于 任何 结构 化 文档 的 标准 模型 .XML DOM 和 HTML DOM 分 别 是 用 于 XML 
文档 和 HTML 文档 的 标准 模型 。 在 DOM 中 ,定义 了 所 有 文档 元 素 的 对 象 和 属性 ,以 及 访 
问 它们 的 方法 。 

对 于 DOM 对 象 的 访问 ,可 以 出 现在 页 面 的 脚本 程序 中 ,也 可 以 直接 在 浏览 器 地 址 栏 中 
书写 。 例 如 : 当 浏 览 网 页 时 ,有 时 候 需 要 知道 网 页 的 发 布 时 间 , 从 而 判断 网 页 内 容 是 否 是 很 
久 以 前 的 ,此 时 ,可 以 在 浏览 器 的 地 址 栏 中 输入 : 


javascript :document. write(document. lastModified) 


输入 结束 后 , 按 回 车 键 , 则 打开 一 个 新 的 网 页 显示 当前 正在 浏览 的 网 页 的 最 后 修改 日 
期 。 然 后 单 击 浏览 器 工具 栏 中 的 后 退 按钮 ,返回 到 刚才 浏览 的 网 页 。 
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1. HTML DOM 对 象 
当 浏 览 器 打开 一 个 HTML 文档 时 ,对 应 文档 中 的 每 一 个 元 素 ,在 内 存 中 创建 一 个 文档 
对 象 , 文 档 对 象 的 属性 和 方法 对 应 了 元 素 的 一 般 属性 和 事件 属性 。 对 应 元 素 的 层次 关系 ,这 
些 文档 对 象 表现 为 层次 结构 ,构成 一 棵 HTML 文档 对 象 树 。 
根据 HTML DOM 的 概念 ,每 一 个 DOM 对 象 都 对 应 一 个 HTML 元 素 ,因此 ,网 页 中 
有 什么 元 素 就 有 什么 DOM 对 象 ,常见 的 HTML DOM 对 象 见 表 5-19。 
表 5-19 常用 HTML DOM 对 象 


















































DOM 对 象 说 明 DOM 对 象 说 明 
EE 整个 i 

document 后 Ms Wiad Form 封装 < form > 元 素 
meta 对 装 一 个 < meta > 元 素 input text 封装 表单 中 的 一 个 文本 框 
link 封装 一 个 < link > 元 素 input password | 封装 表单 中 的 一 个 密码 域 
style 封装 一 个 单独 的 样式 声明 textarea 封装 < textarea > 元 素 
body 时装 < body > 元 素 button 封装 < button > 元 素 
Image 里 装 < img > 元 素 input radio 封装 表单 中 的 一 个 单 选 按钮 
Anchor 封装 < a > 元 素 input checkbox | 封装 表单 中 的 一 个 复 选 框 
Table 里 装 < table > 元 素 Select 封装 表单 中 的 一 个 选择 列表 
TableRow 里 装 < tr > 元 素 option 封装 < option > 元 素 
TableData 里 装 < td > 元 素 input file 封装 表单 中 的 一 个 文件 上 传 
{rameset 对 装 < {rameset > 元 素 input hidden 封装 表单 中 的 一 个 隐藏 域 
frame 对 装 < frame > 元 素 Event 封装 某 个 事件 的 状态 
iframe 时 装 < iframe > 元 素 





在 上 述 表 格 中 ,在 DOM 对 象 列 , 分 为 两 种 情况 : 对 象 ,例如 document、body 对 象 , 因 
为 一 个 HTML 文档 只 有 一 个 document 和 一 个 body 对 象 。 回 对 象 类 ,例如 Image, 因为 一 
个 HTML 文档 可 能 包含 多 个 < img > 标记 ,每 个 标记 都 创建 一 个 Image 对 象 。 在 所 有 的 
HTML DOM 对 象 中 ,它们 之 间 为 层次 结构 关系 ,这 种 关系 和 文档 中 元 素 的 层次 关系 一 致 。 
因此 ,可 以 说 所 有 元 素 对 象 都 是 document 对 象 的 成 员 对 象 。 同 时 ,文档 又 是 浏览 器 窗口 的 
一 部 分 ,因此 ,document 对 象 又 是 window 对 象 的 成 员 对 象 。HTML DOM 对 象 层次 结构 
关系 如 图 5-10 所 示 。 


document 


anchors images forms links frames body 


text password textarea radio checkbox button select hidden submivreset … 


图 5-10 HTML DOM 对 象 层次 结构 


2. DOM 对 象 属性 及 方法 
在 计算 机 软件 中 ,一 个 对 象 包括 属性 和 方法 两 部 分 。 在 HTML DOM 中 ,每 一 个 文档 


对 象 都 对 应 一 个 HTML 元 素 , 是 对 应 HTML 元 素 的 封装 。HTML 元 素 的 一 般 属 性 对 应 
DOM 对 象 的 属性 ,HTML 元 素 的 事件 属性 对 应 DOM 对 象 的 方法 。 此 外 ,用 户 也 可 以 自 定 
义 HTML 元 素 属性 ,这 些 属 性 也 一 并 成 为 对 应 DOM 对 象 的 属性 和 方法 。 因 此 , 当 我 们 熟 
悉 了 HTML 标记 的 属性 后 ,HTML DOM 对 象 及 其 属性 和 方法 是 很 容易 理解 的 。 

例如 : 对 应 <img src 一 "smile. jpg" style 二 "position:absolute; bottom:0px">, 将 创建 
一 个 Image 对 象 , 该 对 象 必然 有 一 个 src 属性 和 style 属性 , 且 src 属性 的 值 为 "smile. jpg”， 
style 属性 将 图 片 定 位 在 窗口 的 底部 。 通 过 JavaScript 编程 ,可 以 设置 Inage 对 象 新 的 属性 
值 ,从 而 对 网 页 中 < img > 标记 的 图 片 进 行 操 作 ,例如 : 改换 图 片 文件 ,改变 图 片 位 置 等 。 


5.7.2 文档 对 象 document 


当 浏 览 器 打开 一 个 HTML 网 页 文件 时 ,在 内 存 中 创建 一 个 文档 对 象 , 对象 名 为 
document。 文 档 对 象 document 封装 了 整个 HTML 文档 ,因此 ,在 HTML DOM 层次 结构 
中 ,所 有 元 素 对 象 都 可 看 作 是 document 对 象 的 成 员 对 象 。 

1. document 对 象 属性 

文档 对 象 document 封装 了 整个 HTML 文档 ,因为 一 个 HTML 文档 是 由 文本 、 图 片 、 
超 链接 、 表 格 、 表 单 等 元 素 构 成 的 ,这 些 元 素 在 内 存 中 也 会 创建 相应 的 对 象 ,这 些 对 象 构成 了 
document 对 象 的 属性 ,document 对 象 常见 属性 见 表 5-20。 

表 5-20 document 对 象 常见 属性 列表 
属 性 名 说 明 
all[] 成 员 数 组 ,存储 文档 中 所 有 HTML 元 素 对 象 
images[] 成 员 数组 ,存储 文档 中 所 有 < img > 元 素 对 应 的 Image 对 象 
成 员 数 组 ,存储 所 有 < a name 二 "bookname"> 元 素 对 应 的 Anchor 对 象 ,如 果 含 有 href 




















anehors[] | 属性 , 则 对 象 保存 到 links[] 数 组 中 

links[] 成 员 数组 ,存储 所 有 < a href 二 "url"> 超 链接 元 素 对 应 的 Link 对 象 

forms[] 成 员 数 组 ,存储 文档 中 所 有 < formy 元 素 对 应 的 Form 对 象 

hody 成 员 对 象 , 对 应 文档 < body > 元 素 。 因 为 一 个 HTML 只 有 一 个 < body >, 因 此 ,对 文档 


体内 元 素 的 访问 ,可 直接 通过 document 对 象 进行 
lastModified | 存储 文档 最 后 修改 的 日 期 和 时 间 




















cookie 存储 当前 文档 有 关 的 所 有 cookie 
domain 存储 当前 文档 的 域名 

URL 存储 文档 的 URL 

referrer 存储 载 入 当前 文档 的 文档 URL 


文档 对 象 document 包含 的 属性 很 多 ,这 与 HTML 文档 中 包含 的 元 素 有 关 。 但 是 不 是 
所 有 的 文档 元 素 都 被 封装 成 一 个 document 的 成 员 ,例如 table 元 素 。 理 论 上 讲 , document 
对 象 有 两 个 成 员 对 象 , 即 head 元 素 和 body 元 素 ,其 他 文档 元 素 都 是 body 对 象 的 成 员 。 但 
是 ,由 于 一 个 HTML 文档 只 有 一 个 body ,为 操作 方便 ,对 文档 中 元 素 的 访问 通常 可 以 直接 
通过 document 完成 ,而 不 是 写成 “document. body. 元 素 ” 的 形式 。 

2. document 对 象 方法 

文档 对 象 document 常用 方法 见 表 5-21 。 
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表 5-21 document 对 象 常用 方法 列表 


砚 法 功 能 

打开 一 个 输出 流 ,返回 一 个 新 的 document 对 象 。 

open(mimetype, replace) 参数 mimetype, 可 选 ,设置 文档 类 型 ,默认 值 为 "text/html"。 

参数 replace, 新 文档 将 覆盖 当前 网 页 内 容 

在 文档 输出 ,如 果 是 一 个 逻辑 表达 式 , 则 输出 true 或 false, 如 果 是 一 个 














write(expl ,exp2,...) Array 对 象 , 则 输出 数组 元 素 的 值 , 多 个 元 素 值 之 间 用 逗号 分 开 。 如 果 是 
对 象 , 则 输出 属性 名 和 属性 值 

writeln(expl ,exp2,...) 功能 同 write() 方 法 ,输出 结束 后 输出 一 个 换行 符 

close() 关闭 用 open() 方 法 打开 的 输出 流 





返回 文档 中 元 素 id 属性 为 id 的 DOM 对 象 。 一 个 结构 良好 的 HTML 文 
档 ,元 素 的 id 属性 是 唯一 的 

返回 文档 中 元 素 name 属性 为 实际 参数 name 的 对 象 的 集合 。 因 为 一 个 
getElementsByName(name) | 文档 中 元 素 的 name 属性 可 能 不 唯一 ,所 以 该 方法 可 能 返回 一 个 简单 变 
量 , 也 可 能 返回 一 个 数组 

getElementsByTagName 返回 文档 中 指定 标签 名 的 对 象 集合 。 返 回 元 素 的 顺序 是 它们 在 文档 中 的 
(tagname) 顺序 。 如 果 文 档 中 包含 多 个 相同 的 标记 , 则 返回 一 个 数组 


getElementByld(id) 











在 HTML DOM 中 ,定义 了 多 种 访问 DOM 对 象 的 方法 ,除了 getElementById() 之 外 ， 
还 有 getElementsByName() 和 getElementsByTagName()。 如 果 需 要 查找 文档 中 的 一 个 特 
定 的 元 素 ,最 有 效 的 方法 是 getElementById()。 在 操作 文档 的 一 个 特定 的 元 素 时 ,最 好 给 
该 元 素 一 个 id 属性 ,为 它 指定 一 个 (在 文档 中 ) 唯 一 的 标识 ,然后 就 可 以 用 该 ID 访问 该 元 
素 。 可 以 用 getElementsByTagName() 方 法 获取 任何 类 型 的 HTML 元 素 的 列表 。 例 如 ,下 
面 的 代码 可 获取 文档 中 所 有 的 表 : 

var tables = document.getElementsByTagNanme( "table"); 

window. alert ("This document contains " + tables. length + " tables"); 


需要 注意 的 是 ,getElementsByName() 方 法 和 getElementsByTagName() 可 能 返回 一 
个 简单 变量 ,也 可 能 返回 一 个 数组 ,在 脚本 编程 时 ,必须 要 考虑 到 这 两 种 不 同 的 情况 ,否则 将 
会 出 现 JavaScript 脚本 运行 错误 。 因 为 ,编程 时 ,对 简单 变量 和 数组 的 访问 是 不 一 样 的 。 

3. 访问 HTML DOM 对 象 方法 

利用 文档 对 象 document, 我 们 可 以 用 多 种 方法 获得 一 个 HTML 元 素 对 应 的 DOM 对 
象 ,主要 可 以 有 以 下 几 种 方法 : 

(1) 利用 标记 的 id 属性 访问 对 象 

在 同一 个 HTML 文档 中 ,标记 的 id 属性 应 该 是 唯一 的 ,因此 可 以 通过 id 来 访问 对 应 
的 内 存 DOM 对 象 。 有 两 种 用 法 : 

方法 1: 通过 元 素 id 属性 获得 对 应 的 DOM 对 象 





var obj = document. getElementById("element 一 id"); 
方法 2: 直接 使 用 id 标识 
element - id.[ 属 性 | 方法 ] = .… 


如 果 有 一 个 标识 元 素 id 的 字符 串 ,使 用 eval() 函 数 , 可 以 得 到 对 应 的 DOM 对 象 , 即 : 


obj = eval("element 一 id") 


理论 上 讲 , 上 述 三 种 方法 都 可 以 获取 DOM 对 象 ,实现 对 HTML 元 素 的 访问 和 操作 。 
但 是 ,在 浏览 器 中 ,对 上 述 方法 的 支持 并 不 一 致 。 第 一 种 方法 是 所 有 浏览 器 都 支持 的 。 

(2) 利用 标记 的 name 属性 访问 对 象 

在 HTML 文档 中 ,如 果 一 个 元 素 声 明了 name 属性 ,JavaScript 运行 时 引擎 在 创建 
DOM 对 象 时 ,元 素 的 name 属性 即 成 为 对 应 DOM 对 象 的 名 字 。 通 过 name 属性 访问 对 应 
的 内 存 对 象 , 有 两 种 方法 : 

方法 1: 获取 name 对 应 的 DOM 对 象 


var obj = document. getElementsByName("element — name" ); 


因为 在 一 个 HTML 文档 中 ,元 素 的 name 属性 可 以 重 名 ,因此 返回 的 可 能 是 一 个 数组 ， 
也 可 能 是 一 个 简单 变量 。 

方法 2: 直接 使 用 元 素 的 name 属性 值 

对 于 在 < form > 中 的 输入 域 ,通常 会 给 定 一 个 name 属性 ,此 时 可 以 使 用 下 列 形式 访问 
表单 中 的 这 些 输 入 域 对 象 : 


obj = document. form - name. element - name 


也 可 以 使 用 


obj = document. all. element - name 或 obj = document. all("element - name") 


对 于 < form > 外 的 元 素 , 不 能 通过 元 素 的 name 属性 直接 访问 对 象 ,例如 : 对 于 一 个 < 
span name 一 "spl"></span>, 则 下 列 两 种 写法 都 是 错误 的 : 


document. spl. innerText = "yxxx", 
document. al1. spl. innerText = "xxx" 


要 使 用 上 述 写法 , 需 将 < span > 的 name 属性 的 设置 改 为 id 属性 的 设置 , 即 < span id 一 
“al 

(3) 利用 document 对 象 的 成 员 对 象 all 访问 

在 文档 对 象 document 中 ,包含 一 个 数组 成 员 all, 它 存储 了 文档 中 所 有 元 素 对 应 的 
DOM 对 象 。 为 增强 代码 的 可 读 性 ,这 些 对 象 也 分 类 保存 在 images、links、anchors 和 forms 
数组 成 员 中 ,利用 这 几 个 成 员 可 以 访问 DOM 对 象 。 

在 JavaScript 中 ,数组 元 素 的 访问 有 多 种 形式 , 既 可 以 使 用 数组 常用 的 括号 ([]) 操 作 
符 , 也 可 以 使 用 对 象 元 素 常 用 的 点 操作 符 (. ) ,还 可 以 使 用 圆 括号 操作 符 。 使 用 all 成 员 对 象 
访问 DOM 对 象 的 一 般 形式 有 : 

obj = document.all. element — id 

obj = document.all["element — id"] 


obj = document.all("element ~ id") 
obj = document. all. item("element 一 id") 第 


5 
需要 注意 的 是 ,必须 使 用 元 素 的 id 属性 ,不 能 使 用 name 属性 ,因为 在 一 个 HTML 文档 | 章 
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中 ,name 属性 是 可 以 重 名 的 , 重 名 的 时 候 .JavaScript 会 创建 一 个 数组 ,而 id 属性 是 不 能 重 
名 的 , 它 唯一 地 标识 了 一 个 元 素 。 

【 例 5-10】 正确 访问 HTML DOM 对 象 是 进行 JavaScript 编程 的 基础 ,阅读 下 列 代 
码 ,分 析 运 行 结果 。 

代码 清单 : accessdoms. htm 


<! DOCTYPE html > 
<html> 
<head> 
<meta charset = "utf — 8"> 
<style type = "text/css"> 
span{ font - size:16px;color: #0000FF;cursor:pointer;} 
div { 
position:absolute; 
top: 50px; 
left:10px; 
width:150px; 
height :100px; 
border :1px solid #f£ff£f0000; 
text - align:center; 
line— height:600%; 
} 
</style> 
< script type = "text/javascript"> 
41017771111111111111171111111111111111111111111111111111111111111111111111111111111111/ 
// 参 数 obj 为 对 象 
function funl(obj) 
{ 
document. forml.t1. value = obj. innerHTML; 
} 
L71171111111111111111111111111111111117111111111111111111111111111111111111111111111/ 
// 参 数 idstr 为 元 素 id 字符 串 
function fun2(idstr) 
{ 
obj = document. getElementById( idstr); 
obj. style. bottom = "100px"; 
//eval(idstr). style. bottom = "100px"; 
} 
L77177717111111111111711111111111111111111111111111111111111111111111111111111111111111 
// 无 参 函数 ,通过 元 素 id 直接 访问 元 素 对 象 
function fun3() 
{ 
winwidth = window. innerWidth ? window. innerWidth : document. body. clientWidth; 
winheight = window. innerHeight?window. innerHeight :document. body. clientHeight; 
left = (winwidth- 150)/2 + "px"; 
if (popupdiv. style. left!= left) 


popupdiv. style. left = (winwidth- 150)/2 + "px"; 
popupdiv. style. top = (winheight — 100)/2 + "px"; 
} 
else 
{ 
证 (popupdiv. style. display == "none") 
popupdiv. style. display = "block"; 
else 
popupdiv. style. display = "none"; 
} 
} 
</script > 
</head> 
<body> 
< span onclick = "funl (this)"> 参 数 传递 ,实际 参数 为 对 象 </span>| | 
< span onclick= "fun2( 'mydog')"> 参 数 传递 ,实际 参数 为 字符 串 </span >| | 
< span onclick = "fun3()"> 居 中 显示 ,或 隐藏 </span> 


< img src= "images/dog. jpg" id= "mydog" style= "position:absolute;bottom:0;left:0"> 
<div id ="popupdiv"> 

图 层 在 客户 区 居中 

</div> 

<form name = "forml"> 

< input type = "text" name= "tl”"value= ""> 

</form> 

</body> 

</html > 


对 于 上 述 代码 清单 ,说 明 如 下 : 

(1) 不 同 的 HTML 版 本 ,有 些 代码 可 能 不 兼容 ,例如 上 述 代码 中 修改 对 象 的 style 属性 
语句 obj. style. bottom 王 100, 在 HTML 4.01 中 是 可 以 的 ,但 在 HTML 5 中 ,所 有 关于 位 置 
量 的 都 需要 给 定单 位 , 即 obj. style. bottom 王 "100px" 。 

(2) 不 同 的 浏览 器 支持 的 DOM 对 象 属性 不 完全 一 样 , 例 如 ,在 函数 fun3() 中 , 求 浏览 
器 窗口 客户 区 的 高 度 和 宽度 ,考虑 到 了 IE 浏览 器 和 其 他 浏览 器 的 情况 。 

(3) 对 于 JavaScript 函数 定义 和 调用 ,形式 参数 可 以 是 字符 串 ,也 可 以 是 一 个 对 象 ,两 
者 在 函数 内 部 使 用 时 不 同 。 例 如 : 函数 funl(obj) 形 式 参数 为 对 象 , 则 在 函数 调用 时 ,实际 
参数 必须 是 DOM 对 象 , 参 数 this 为 当前 对 象 ,在 函数 内 部 可 以 直接 对 对 象 操作 。 函 数 fun2 
(idstr) 定 义 的 形式 参数 类 型 为 代表 一 个 DOM 对 象 的 id 字符 串 ,在 函数 调用 时 ,实际 参数 为 
字符 串 ,因此 在 函数 内 部 ,通过 eval() ,将 参数 字符 串 转化 成 对 应 的 对 象 。 

在 定义 JavaScript 函数 时 ,如 果 某 个 参数 为 标记 的 id, 在 函数 调用 时 ,如 果实 际 参数 只 
写 id 号 , 则 参数 代表 的 是 一 个 对 象 ,如 果 参 数 写 成 id 号 两 侧 用 双 引 号 或 单 引 号 括 起 来 , 则 参 
数 为 字符 串 , 两 者 有 着 很 大 的 不 同 , 直 接 影响 函数 内 部 的 语句 写法 。 

在 Google Chrome 浏览 器 中 打开 该 网 页 ,显示 结果 如 图 5-11 所 示 。 

对 于 document 对 象 ,在 执行 输出 操作 后 ,最 后 一 定 要 使 用 close() 方 法 关闭 输出 流 , 否 
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5 3 CC Dfile///F/haosite/exa5-10.html 安 | 号 
参数 传 违 ， 广 际 参数 为 对 象 | | 参数 传递, 实际 参数 为 字符 串 | | 居中 显示 ， 或 辽 戈 


图 层 在 客户 区 居中 


则 ,在 浏览 器 的 状态 栏 将 显示 蓝 色 进 度 条 ,显示 下 载 未 完成 。 例 如 ,在 一 个 数据 记录 内 容 修 





图 5-11 对 象 访问 示例 页 面 显示 结果 


改 页 面 , 向 一 个 iframe(name 二 filelistbox) 中 输出 内 容 , 代 码 如 下 : 


document. filelistbox. document. write("< body style = 'margin ~ top:0px; margin - left:10px; font 


— size:12px; line - height:150% >"); 


document. filelistbox. document. write( "< span style= 'display:none;'>" + iframestr + "</span>"); 


document. filelistbox. document. write("..."); 


document. filelistbox. document. write("</body >"); 
document. filelistbox. document. close( ); 


5.7.3 文档 体 对 象 body 


每 一 个 HTML 网 页 文件 都 有 一 个 < body > 标记 ,对 应 body 元 素 ,浏览 器 在 内 存 中 创建 
一 个 body 对 象 ,body 对 象 封装 了 HTML 文件 中 < body > 标记 的 属性 以 及 所 有 的 文档 体 中 
包含 的 元 素 对 象 。 从 HTML 结构 看 ,body 对 象 是 document 对 象 的 成 员 对 象 ,body 对 象 常 


用 属性 和 方法 见 表 5-22 。 


属 性 


表 5-22 ”document. body 对 象 属性 列表 


说 明 





className 


存储 body 元 素 class 属性 值 





scrollWidth 
scrollHeight 





topMarign, bottomMargin 
leftMarign, rightMargin 


存储 浏览 器 窗口 客户 区 内 容 和 上 、 下 、 左 、 右 边框 的 距离 (像素 ) 





clientWidth client Height 


存储 浏览 器 窗口 客户 区 宽度 和 高 度 





clientLeft clientTop 


存储 浏览 器 窗口 客户 区 左上 和 角 (x,y) 坐 标 














innerHTML 存储 < body> 体 内 的 HTML 内 容 , 包 括 标记 

innerText 存储 < body> 体 内 的 文本 内 容 ,标记 被 作为 文本 处 理 

bgColor 存储 < body > 背景 色 

二 如 果 该 成 员 变量 设 为 true, 则 页 面 的 内 容 被 灰 化 , 且 不 可 被 选取 , 右 


击 时 快捷 菜单 被 禁用 





存储 文档 实际 的 宽度 和 高 度 。 若 宽度 大 于 浏览 器 窗口 的 宽度 , 则 显 
未 水 平 滚动 条 , 若 高 度 大 于 浏览 器 窗口 的 高 度 ' 则 显示 垂直 滚动 条 


在 < body > 标记 属性 中 ,scrollWidth 和 scrollHeight 存储 了 文档 的 宽度 和 高 度 。 通 常 
情况 下 ,文档 的 大 小 随 着 内 容 的 多 少 而 变化 。 其 实 ,body 和 div 一 样 , 也 是 可 以 设置 大 小 
的 ,例如 : body{f width:10000px;height:10000px}。 文 档 是 通过 浏览 器 窗口 来 观察 的 ,通过 
window 对 象 的 scrollTo() 和 scrollBy() 方 法 可 以 将 浏览 器 窗口 左上 和 角 定 位 到 文档 区 域 空间 
的 某 个 位 置 ,所 观察 的 范围 就 是 浏览 器 窗口 的 大 小 。 

对 于 body 对 象 的 innerHTML 和 innerText 的 属性 功能 不 同 , 如 果 一 段 字符 串 文本 包 
含 HTML 标记 ,将 该 文本 赋 给 innerText 属性 , 则 页 面 内 容 用 innerText 的 文本 替换 ,该 文 
本 不 按照 其 包含 的 THML 标记 显示 ; 如 果 同 样 的 文本 赋 给 innerHTML 属性 , 则 页 面 内 容 
被 innerHTML 中 的 文本 替换 ,该 文本 按照 HTML 规范 解析 。 例 如 : document. body. 
innerText="<b> Hello </b>" 和 document. body. innerHTML 王 "<b> Hello </b >", 产 
生 的 结果 不 同 。 

从 HTML 文档 结构 看 ,body 对 象 是 document 对 象 的 成 员 对 象 , 对 文档 体内 所 有 元 素 
的 访问 应 该 通过 document. body 来 访问 。 但 是 ,为 了 书写 上 的 方便 ,在 document 对 象 中 ， 
直接 包含 了 有 关 文 档 体内 的 元 素 对 象 。 例 如 : 设置 文档 的 背景 色 , 理 论 上 应 该 写 为 
document. body. bgColor 王 "" ,但 是 ,也 可 以 直接 写 为 document. bgColor 二 "" ,两 种 写法 结 
果 是 一 样 的。 实际 上 ,对 文档 体 中 大 多 数 元 素 的 访问 几乎 都 可 以 直接 使 用 document, 而 不 
是 document. body 来 访问 。 


5.7.4 图 像 对 象 Image 


在 HTML 文档 中 ,对 应 每 个 < img > 标记 ,浏览 器 在 内 存 中 都 创建 一 个 对 应 的 Image 对 
象 。 与 document 对 象 和 body 对 象 不 同 ,图 像 对 象 可 能 有 多 个 ,因此 ,可 能 给 定 一 个 唯一 的 
对 象 名 ,因此 ,将 图 像 对 象 定 义 为 一 个 类 ,名 称 为 Image。 每 一 个 img 元 素 都 对 应 一 个 
Image 对 象 ,这 些 Image 对 象 保存 在 document 对 象 的 images 数组 成 员 中 。 

在 HTML 中 ,img 元 素 的 属性 很 多 ,这 也 就 决定 了 Image 对 象 的 属性 ,常用 Image 对 象 
的 属性 见 表 5-23。 














表 5-23 Image 对 象 属性 


























属 性 说 明 
id 存储 Image 对 象 id 值 
name 存储 Image 对 象 name 属性 值 
src 存储 Image 对 象 对 应 的 图 片 文件 URL 
height，width 存储 图 片 的 高 度 和 宽度 
border 存储 图 片 周围 边框 属性 值 
vspace 图 片 在 垂直 方向 上 与 上 面 或 下 面 文字 之 间 的 距离 
className 存储 图 片 对 象 的 class 属性 值 


在 网 页 中 使 用 图 片 ,除了 增加 页 面 的 视觉 效果 ,还 可 以 通过 JavaScript 程序 动态 地 选择 
载 和 的 图 片 ,或 者 实现 一 些 动画 效果 ,从 而 增加 页 面 的 动感 。 

【 例 5-11】 有 两 幅 小 狗 左右 张望 的 图 片 ,利用 Image 对 象 ,实现 简单 的 动画 效果 。 

分 析 : 只 要 利用 window 对 象 的 setInterval() 函 数 , 两 幅 图 像 轮流 显示 即 可 。 


答 户 竞 编程 


第 
5 
章 


Web 投 大 导论 (种 4 版 ) 





代码 清单 : imgloop. htm 


<!DOCTYPE html > 
<html> 
<head> 
< script type = "text/javascript"> 
var imgnum = 0; 
var imglist = new Array(2); 
for (i=0;i<2;i++) 
{ 
imglist[i] = new Image(); 
imglist[i].src= "dog" + (i+1) +".jpg" 
} 
MAAN 
// 对 dogimg 元 素 , 设 置 对 象 的 src 属性 , 改变 网 页 中 显示 的 图 片 
function imgloop() 
{ 
imgnum = (imgnum+1) % 2; 
dogimg. src = imglist[ imgnum]. src; 
forml. msg. value = imgnum; 
} 
var clockid= self. setInterval("imgloop()",1000); 
</script > 
</head> 
<body> 
<img id = "dogimg" src= "dogl.jpg"> 
<form name = "forml"> 
< input type = "text" name = "msg" size = "15" /> 
< input type = "button" value = "Stop" onclick = "window. clearInterval(clockid)"> 
</form> 
</body > 
</html > 


在 创建 Image 对 象 时 ,使 用 new Image() ,其 中 的 Image 首 字母 是 大 写 , 这 点 特别 要 注 


意 。 在 JavaScript 中 ,内 置 对 象 一 般 采 用 首 字母 小 写 的 小 驼峰 命名 法 ,而 对 象 类 则 采用 首 字 
母 大 写 的 大 驼峰 命名 法 。 例 如 数组 Array 对 象 .日 期 Date 对 象 等 。 


5.7.5 Link 对 象 与 Anchor 对 象 


在 HTML 文档 中 ,有 两 种 类 型 的 链接 ,一 种 是 在 < head >.. </head > 之 间 的 < link > 元 
素 , 还 有 就 是 超 链接 元 素 < a >。 对 于 < a > 元 素 , 一 种 用 于 定义 一 个 超 链接 , 即 设置 href 属 
性 ,还 有 一 种 形式 就 是 定义 文档 中 的 锚 点 (书签 ), 即 只 有 name 属性 ,没有 href 属性 。 

根据 上 述 情况 ,文档 对 象 document 有 两 个 成 员 对 象 数 组 , 即 anchors[ ] 和 links[]， 
anchors[ 保存 锚 点 (书签 ) 对 象 ,links[ 保存 Link 对 象 和 超 链接 对 象 。 不 论 是 Link 对 象 还 
是 Anchor 对 象 ,对 象 的 属性 总 是 与 < link > 元 素 和 < a > 元 素 的 属性 相对 应 。 

【 例 5-12】 设置 和 更 改 < a > 元 素 的 相关 属性 。 

分 析 : 对 于 文档 中 的 超 链 接 ,使 用 HTML DOM 对 象 ,可 以 在 已 经 显示 的 网 页 中 动态 地 
更 改 超 链接 的 目标 文件 。 


代码 清单 : links. htm 


<!DOCTYPE htm] > 
<html> 
<head> 
<meta charset = "utf — 8"> 
</head> 
<body> 
<form> 
< input type = "button" value = "Google" 
onclick = "document. links[0].href = 'http: //www. google. com'"> 
< input type = "button" value = "百度 " 
onclick = "document. links[0].href = 'http://www.baidu.com'"> 
</form> 
<a href = "javascript:alert(' 先 单 击 按钮 ,选择 一 个 搜索 引擎 ,然后 再 单 击 搜索 ')"> 搜 索 </a> 
<script> 
document. write( document. links. length); 
document. write(document. anchors. length) ; 
</script > 
</body > 
</html > 


在 浏览 器 中 打开 上 述 页 面 , 超 链接 <a > 的 href 属性 的 初 值 为 一 段 JavasSript 代码 , 当 用 
户 单 击 超 链接 时 ,显示 一 个 警示 对 话 框 。 当 用 户 单 击 了 某 个 搜索 引擎 按钮 后 ,将 修改 
document. links[0j. href 的 值 , 即 a 元 素 对 应 的 内 存 对 象 的 href 属性 ,这 样 超 链接 的 href 就 
被 设置 成 一 个 URL。 然 后 ,再 单 击 超 链接 时 ,将 打开 某 个 搜索 引擎 网 页 。 


5.7.6 表格 对 象 Table 


在 HTML 中 ,表格 是 最 重要 的 数据 组 织 和 页 面 布局 工具 ,通过 表格 DOM 对 象 操作 ,可 
以 在 客户 端 对 表格 进行 插入 行 .删除 行 、 移 动 行 、 修 改 单元 格 内 容 以 及 行 和 单元 格 的 显示 及 
隐藏 等 各 种 操作 。 特 别 是 在 数据 库 操作 中 ,通过 表格 操作 ,可 以 减少 客户 端 和 数据 库 服 务 器 
的 操作 次 数 ,减少 服务 器 负载 ,优化 服务 器 性 能 。 

1. 表格 对 象 

在 网 页 文件 中 ,可 以 包含 多 个 表格 。 每 一 个 < table > 标记 ,浏览 器 都 会 在 内 存 中 创建 一 
个 表格 对 象 ,对 象 类 的 名 称 为 Table。 表 格 对 象 Table 属性 见 表 5-24。 


表 5-24 Table 对 象 常用 属性 及 方法 


























属 性 

className 存储 表格 的 class 属性 
width 存储 表格 的 宽度 ,高 度 一 般 由 表格 行 决定 
border 设置 或 返回 表格 边框 的 宽度 (以 像素 为 单位 ) 
cellSpacing 单元 格 之 间 的 距离 (以 像素 为 单位 ) 
cellPadding 单元 格 内 容 到 单元 格 边 框 的 距离 (以 像素 为 单位 ) 
rows[] 表格 包含 的 所 有 行 对 象 (TableRow 对 象 ) 构 成 的 数组 

表格 中 所 有 单元 格 对 象 构成 的 数组 。 要 定位 一 个 i 行 ,j 列 的 单元 格 , 可 写 为 
cells[] . 

rows[i-11]. cells[j-1] 
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续 表 
属 性 
tBodies[ | 表格 中 所 有 tbody 对 象 构成 的 数组 
方 法 





createCaption() 


用 于 在 表格 中 获取 或 创建 < caption > 元 素 





deleteCaption() 


从 表格 删除 caption 元 素 以 及 其 内 容 





createTHead() 


在 表格 中 创建 一 个 空 的 tHead 元 素 











deleteTHead() 从 表格 删除 tHead 元 素 及 其 内 容 
createTFoot() 在 表格 中 创建 一 个 空 的 tFoot 元 素 
deleteTFoot() 从 表格 删除 tFoot 元 素 及 其 内 容 





insertRow (index) 


在 表格 index 行 之 前 插入 一 个 新 行 , 并 返回 新 插入 的 行 对 象 TableRow。 若 index 
等 于 表 中 的 行 数 , 则 新 行将 被 附加 到 表 的 末尾 。 如 果 表 是 空 的 , 则 新 行将 被 插入 
到 一 个 新 的 < tbody > 段 , 该 段 自身 会 被 插入 表 中 





deleteRow (index) 





参数 index 指定 要 删除 的 行 在 表 中 的 位 置 。 行 的 编码 顺序 为 行 在 文档 源 代码 的 
出 现 顺序 。< thead > 和 < tfoot > 中 的 行 与 表 中 其 他 行 一 起 编码 





对 于 表格 中 的 相关 属性 值 , 可 以 通过 window. alert( 表 格 id. 属性 ) 来 检查 ,例如 : 有 一 
个 表格 的 id 为 Tablel , 则 window. alert(Tablel. width) 将 显示 表格 的 宽度 值 。 同 时 ,也 可 
以 看 到 window. alert(Tablel. height) 显示 “undefined”, 表 明 表 格 对 象 不 包含 height 属性 。 


2. 表格 行 对 象 


一 个 表格 是 由 若干 行 (< tr >) 构 成 的 ,每 一 行 对 应 一 个 表格 行 对 象 ,表格 行 对 象 类 的 名 
字 为 TableRow。 在 HTML 文档 中 ,每 一 个 <tr > 元素 ,对 应 一 个 TableRow 对 象 , 其 属性 和 


方法 见 表 5-25。 


表 5-25 表格 行 对 象 类 TableRow 常用 属性 及 方法 
属 性 

















rowlIndex 存储 表格 行 对 象 在 集合 中 的 位 置 (row index) 
innerHTML 存储 表格 行 开始 标签 和 结束 标签 之 间 的 HTML 代码 
cells[L] 存储 表格 行 包含 的 单元 格 对 象 数 组 

align 存储 表格 行 中 数据 的 水 平 排列 设置 

vAlign 存储 表格 行 中 数据 的 垂直 排列 方式 设置 





方 ” 法 





insertCell(index) 


在 单元 格 index 之 前 插入 一 个 新 的 单元 格 , 并 返回 TableCell 对 象 。 若 index 等 
于 行 中 的 单元 格 数 , 则 新 单元 格 将 被 附加 到 行 的 末尾 





deleteCell(index) 





参数 index 指定 了 要 删除 的 单元 格 在 表 中 的 位 置 


需要 说 明 的 是 ,虽然 < tr > 标记 可 以 设置 height 属性 ,但 表格 行 对 象 并 不 包含 height 属 
性 ,当然 ,也 不 包含 width 属性 ,执行 alert(Tablel. rows[0]. height) ,显示 “undefined”。 


3. 单元 格 对 象 


单元 格 对 象 类 的 名 称 为 TableCell ,一 个 HTML 表格 单元 格 对 应 一 个 TableCell 对 象 。 
在 一 个 HTML 文档 中 ,每 一 个 < td > 元 素 对 应 一 个 TableCell 对 象 。TableCell 对 象 包含 一 
组 可 读 写 的 属性 ,但 未 定义 方法 ,其 常见 属性 见 表 5-26 。 


表 5-26 单元 格 对 象 TableCell 常用 属性 





























属 性 说 明 
id 存储 单元 格 id 
存储 单元 格 的 宽度 和 高 度 值 , 如 果 单 元 格 未 设置 width 属性 值 或 height 属性 值 ， 
width ,height 
则 返回 空 
cellIndex 返回 单元 格 在 某 行 的 单元 格 集合 中 的 位 置 
innerHTML 存储 单元 格 开 始 标签 和 结束 标签 之 间 的 HTML 代码 
rowSpan,colSpan 存储 单元 格 横 跨 的 行 数 和 列 数 
className 存储 单元 格 的 class 属性 
align 存储 单元 格 内 部 数据 的 水 平 排列 方式 
vAlign 存储 单元 格 内 数据 的 垂直 排列 方式 


在 HTML DOM 中 ,单元 格 对 象 包含 了 高 度 和 宽度 属性 ,一 般 情 况 下 ,我 们 会 在 < tr > 
标记 中 设置 行 的 高 度 ,但 表格 行 对 象 和 表格 对 象 都 不 包含 height 属性 。 

【 例 5-13】 设计 一 个 页 面 ,实现 表格 行 顺序 的 上 下 调整 。 

分 析 : 在 Web 开发 中 ,对 于 列表 项 ,有 时 候 我 们 需要 调整 它们 的 显示 顺序 。 显 示 顺 序 
的 调整 最 简单 的 方法 是 设计 一 个 顺序 编号 ,在 从 数据 库 读 出 时 , 按 顺序 编号 排序 。 另 一 种 办 
法 就 是 ,允许 用 户 在 客户 端 调整 。 

设 我 们 设计 的 一 个 问卷 项 目 编辑 及 项 目 顺序 调整 页 面 如 图 5-12 所 示 。 












































【课程 问卷 管理 ]A(50 分 ) 二 级 指标 管理 添加 二 级 指标 项 目 
序号 -级 指标 操 作 显示 顺序 
1 老师 讲课 条 一 清楚 ,深入浅出 (10) 修改 删除 上 移 下 移 
2 老师 为 我 们 耐心 答疑 ,并 且 时 间 充 分 (10) 修改 删除 上 移 下 移 
3 我 认为 老师 对 我 们 和 萝 可 亲 ,平易近人 (10) 修改 删除 上 移 下 移 
4 中 心 网 站 一 一 学 习 园 地 上 的 内 容 对 我 们 学 习 有 帮助 (10) 修改 删除 上 移 下 移 
5 教师 教学 认真 ,对 我 们 要 求 严格 (10) 修改 删除 上 移 下 移 
单 击 页 面 右上 角 的 “添加 二 级 指标 项 目 ”, 可 以 为 一 级 指标 添加 二 级 指标 项 目 











图 5-12 问卷 调查 项 日 编辑 界面 
实现 上 述 功能 代码 清单 如 下 : surveymodal-edit2. htm 


<!DOCTYPE html > 
<html > 
<head > 
<meta charset = "utf — 8"> 
< script type = "text/javascript"> 
LALALLLLLLLLLLLLLLLLLLLALLLLLLLLLLALLNLLLLLLLLLLLLLLLLLLNLLLLLLLLLLLLALAL 
// 编 辑 一 项 新 的 项 目 
function itemnew() 
t 
var tempstr = "<p align = left > 二 级 指标 : < input type = 'text'name = 'itemname' size = '35>"; 
tempstr += "分 值 : < input type = 'text' name = 'score' value= '0' size= '2>"; 
tempstr += "< input type= 'button' name = 'btnl' value= ' 添 加 ' onclick = 'itemadd() '>"; 
tempstr += "< input type = 'button' name = 'btn2' value = ' 取 消 ' onclick = 'itemcancel()></p>"; 
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editarea. innerHTML = tempstr; 
} 
AAA 
// 上 移 项 目 ,交换 第 2 列 单元 格 对 象 , itencode 为 第 2 列 单元 格 用 户 自 定义 属性 
function moveup( itemnum) 
{ 
var rownum = parseInt( itemum); 
if (rownum== 1) return 0; 
var temp = tablel. rows[rownum— 1].cells[1]. innerText; 
tablel. rows[rownum— 1]. cells[1]. innerText = tablel. rows[rownum]. cells[1]. innerText; 
tablel. rows[rownum]. cells[1]. innerText = temp; 
var itemcode = tablel. rows[rownum— 1].cells[1]. itemcode; 
tablel. rows[rownum— 1]. cells[1]. itemcode = tablel. rows[rownum]. cells[1]. itemcode; 
tablel. rows[rownum].cells[1]. itemcode = itemcode; 
} 
71711711171111111111111111111111111111111111111111111111111111111111111111111111111/ 
// 下 移 项 目 
function movedown( itemnum) 
| 
var rownum = parseInt( itemnum) 7 
var temp = tablel. rows[rownum+ 1].cells[1]. innerText; 
tablel. rows[rownum+ 1]. cells[1]. innerText = tablel. rows[ rownum]. cells[1]. innerText; 
tablel. rows[rownum]. cells[1]. innerText = temp; 
var itemcode = tablel. rows[rownum+ 1].cells[1]. itemcode; 
tablel. rows[rownum+ 1].cells[1]. itemcode = tablel. rows[rownum]. cells[1]. itemcode; 
tablel. rows[rownum]. cells[1]. itemcode = itemcode; 
} 
</script > 
</head> 
<body> 
<table id = "tablel" border = "lpx" style= "border - collapse:collapse;empty - cells: show; "> 
<tr height = "35px"> 
<tdwidth="10% "> 序 号 </td> 
<tdwidth="70% "> 二 级 指标 <a href ="# "onclick = "itemnew()"> 添 加 项 目 </a></td> 
<td colspan = "2"> 显 示 顺 序 </td> 
</tr> 
<tr height = "30px"> 
<td>1-1</td> 
<td itemcode = "item11"> 老 师 讲 课 条 理 清楚 ,深入 浅 出 (10 分 )</td> 
<td><a href ="#" onclick= "moveup('1')"> 上 移 </a></td> 
<td><a href ="#" onclick= "movedown('1')"> 下 移 </a></td> 
</tr> 
<tr height = "30px"> 
<td>1-2</td> 
< td itemcode = "item12"> 耐 心 答疑 ,时 间 充 分 (10 分 )</td> 
<td><a href ="#" onclick= "moveup( '2')"> 上 移 </a></td> 
<td><a href ="#" onclick= "movedown('2')"> 下 移 </a></td> 
</tr> 
<tr height = "60px"> 
< form name = "form1”method = "post" action = "surveymodal - edit2save. jsp" target ="_self"> 
< input type = "hidden" name = "head2l1ist" value ="<% = head2]list %>"> 


<td id = "editarea" colspan= "4"> 
单 击 页 面 右 上 角 的 "添加 二 级 指标 项 目 ", 可 以 为 一 级 指标 添加 二 级 指标 项 目 。 
</td> 
ss 
</tr> 
</table> 
</body > 
</html > 
上 述 代 码 演 示 了 客户 端 强大 的 程序 功能 ,这 可 以 减少 和 Web 服务 器 的 连接 次 数 , 减 少 
服务 器 的 负载 ,提高 整个 系统 的 性 能 。 上 述 示例 程序 ,有 两 处 核心 代码 : 
(1) 在 表格 第 2 列 中 ,我 们 在 < td > 标记 中 设置 了 一 个 用 户 自 定义 属性 itemcode, 这 是 
一 种 全 新 的 用 法 ,因为 在 HTML 规范 中 ,< td > 标记 中 无 此 属性 。 对 于 有 的 标记 ,我 们 不 仅 
需要 标记 的 内 容 ( 即 innerText 和 innerHTML), 有 时 候 还 需要 更 多 的 信息 ,这 些 信息 希望 
不 显示 在 单元 格 中 , 故 为 < td > 添加 了 一 个 用 户 自 定义 属性 itemcode。 
从 HTML DOM 对 象 的 思想 出 发 ,对 于 HTML 中 的 标记 ,除了 规范 给 定 的 属性 外 ,用 
户 还 可 以 根据 需要 设 定 标记 属性 ,JavaScript 都 将 其 转化 为 DOM 对 象 的 属性 ,这 就 大 大 提 
高 了 标记 和 HTML DOM 的 灵活 性 。 这 种 用 法 ,还 常常 用 于 复 选 框 的 分 类 等 。 
(2) 对 于 添加 项 目 函数 itemnew() ,示例 代码 没有 给 出 其 中 涉及 的 所 有 函数 ,但 它 演示 
了 Web 开发 中 数据 维护 的 三 个 主要 问题 : 添加 ,修改 和 删除 ,图 5-12 给 出 了 一 个 很 好 的 功 
能 组 织 界 面 ,界面 友好 始终 是 Web 系统 设计 和 开发 的 重要 内 容 。 
(3) 为 了 突出 重点 ,上 述 HTML 代码 只 列 出 了 核心 代码 ,对 于 表格 样式 没有 给 出 。 其 
中 ,最 重要 的 是 表格 和 单元 格 线条 问题 ,要 显示 表格 中 单元 格 的 线条 ,必须 设置 表格 属性 
border 王 "1px" ,该 属性 不 能 设置 线 型 和 颜色 。 如 果 要 设置 表格 线 的 颜色 和 线 型 , 则 需要 设 
置 表格 的 CSS 属性 border, 例如 : style 王 "border: 1px solid # 0000ff;", 两 个 属性 不 能 
合并 。 


5.7.7 表单 对 和 象 Form 


在 Web 页 中 ,表单 (form) 是 人 机 交互 的 主要 手段 。 在 一 个 网 页 中 ,可 以 包含 多 个 表单 ， 
每 一 个 < form > 元 素 都 在 内 存 中 创建 一 个 表单 对 象 ,对 象 类 名 为 Form。Form 对 象 封 装 了 
网 页 中 的 form 元 素 ,Form 对 象 类 属性 及 方法 见 表 5-27。 


表 5-27 Form 对 象 类 常用 属性 及 方法 























一 般 属 性 
Dame 存储 表单 名 称 , 即 form 元 素 的 name 属性 值 
method 存储 数据 发 送 到 服务 器 的 HTTP 方法 
enctype 存储 表单 用 来 编码 内 容 的 MIME 类 型 
action 存储 表单 的 action 属性 值 
target 存储 表单 提交 后 action 输出 结果 的 输出 窗口 ,默认 值 为 当前 页 面 窗口 
length 存储 表单 中 的 元 素数 日 
elements[ ] 数组 成 员 ,存储 表单 中 所 有 元 素 对 象 
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续 表 
事件 属性 
ee 当 用 户 单 击 表单 中 的 Submit 按钮 提交 一 个 表单 时 执行 该 方法 ,执行 完 后 提交 表 
单 。 如 果 不 设置 该 属性 , 则 直接 提交 表单 
onreset 在 重 置 表单 元 素 之 前 调用 
方 法 
reset() 把 表单 的 所 有 输入 元 素 重 置 为 它们 的 默认 值 
submit() 提交 表单 ,调用 form 的 onsubmit() 方 法 





在 表单 输入 中 ,在 提交 表单 以 前 ,通常 要 进行 数据 有 效 性 验证 。 因 此 ,在 实际 编码 时 ,如 
果 使 用 Submit 按钮 提交 数据 , 则 需要 在 form 中 添加 onsubmit 属性 ,在 处 理 函 数 中 完成 数 
据 有 效 性 验证 工作 。 

很 多 情况 下 ,可 能 使 用 普通 button、 超 链接 或 任何 一 个 可 接受 单 击 的 元 素来 提交 表单 ， 
此 时 ,需要 定义 onclick 处 理 函 数 , 在 处 理 函 数 中 首先 进行 数据 输入 有 效 性 验证 ,最 后 执行 
document. form-name. submit() 提 交 表 单 。 表 单 提交 后 ,form 的 action 属性 设置 的 服务 端 
页 面 被 调用 执行 。 

在 < form > 中 通常 包含 了 一 系列 输入 元 素 , 它 们 也 被 创建 为 相应 的 DOM 对 象 ,并 被 保 
存 到 Form 对 象 的 数组 成 员 elements[ ] 中 。 对 于 输入 对 象 的 属性 和 方法 ,与 输入 标记 的 属 
性 对 应 ,在 此 不 再 详细 介绍 。 

1. 访问 Form 对 象 

从 HTML 文档 结构 看 ,表单 是 文档 对 象 document 的 成 员 。 在 一 个 HTML 文档 中 ,可 
以 定义 多 个 表单 ,因此 在 JavaScript 中 ,访问 Form 对 象 有 多 种 实现 方法 。 

方法 一 : 通过 form 名 称 访问 

在 < form > 标记 中 ,包含 一 个 name 属性 . 它 对 应 了 Form 对 象 的 对 象 名 ,JavaScript 程 
序 可 以 通过 表单 名 来 访问 表单 对 象 , 即 : 


obj = document. form - name 


当然 也 可 以 利用 document. getElementsByName("form-name") 来 返回 Form 对 象 。 

方法 二 : 通过 document 对 象 forms[ ] 属 性 访问 

文档 对 象 document 包含 forms[ ] 数 组 成 员 , 存 储 了 文档 中 定义 的 所 有 表单 元 素 。 因 
此 ,可 以 通过 document 对 象 的 forms 对 象 数组 来 访问 Form 对 象 .有 两 种 用 法 : 

document. forms[ "form-name" | 或 document. forms[num j,num 为 0,1,... 整 数 ,都 返 
回 Form 对 象 。 需 要 说 明 的 是 ,在 JavaScript 中 要 对 form 引用 的 条 件 是 : 必须 先 在 页 面 中 
用 < form > 标记 创建 表单 ,并 将 定义 表单 部 分 放 在 引用 之 前 。 

2. 访问 form 中 的 元 素 

一 个 表单 是 由 若干 的 表单 输入 元 素 组 成 的 ,这 些 输入 元 素 包 括 : 文本 框 (text) \ 单 选 按 
钮 (radio) 、 复 选 框 (checkbox) ,按钮 (button) 等 。 在 HTML 5 中 ,又 新 增 了 输入 类 型 : 日 期 
(date) 、 时 间 (time) ,日 期 时 间 (datetime)、 月 份 (month)、 周 (week)、 数 字 (number)、 范 围 
(range) 、 图 片 (image) 、 邮 件 地 址 (Email) 、 网 址 (url) 等 。HTML 5 丰富 的 输入 类 型 ,使 得 用 
户 输入 的 有 效 性 验证 编码 变 得 更 加 简单 。 





对 于 每 一 个 输入 元 素 ,都 在 内 存 中 创建 相应 的 内 存 对 象 。 根据 HTML 文档 层次 结构 ， 
访问 表单 元 素 DOM 对 象 的 方法 有 以 下 几 种 形式 : 

方法 一 : 直接 通过 输入 元 素 名 

Obj=document. form-name. element-name 

方法 二 : 通过 Form 对 象 的 elements[ ] 数 组 

每 一 个 Form 对 象 包含 一 个 elements[ ] 数 组 成 员 , 存 储 了 表单 中 所 有 的 输入 元 素 的 
DOM 对 象 ,因此 ,可 以 通过 访问 elements[ ] 数 组 来 得 到 一 个 输入 对 象 。 一 般 形式 是 : 


Obj = document. form - name. elements[ "element — name"] 


两 种 方法 都 返回 表单 输入 元 素 对 应 的 DOM 对 象 .不 同 的 form 元 素 , 对 应 的 内 存 对 象 
的 属性 和 方法 也 不 相同 ,但 每 一 个 内 存 对 象 包含 的 属性 和 方法 均 与 其 对 应 的 HTML 标记 
对 应 。 例 如 ,对 于 text 内 存 对 象 , 对 应 一 个 单行 文本 框 输入 元 素 。 在 HTML 中 ,标记 单行 
文本 框 text 输入 的 一 般 形式 是 : 


< input type = "text" name = " input - name" value = "default- value"> 


因此 ,对 应 于 每 一 个 text 对 象 ,其 包含 的 属性 包括 : name 属性 、value 属性 等 。 对 对 象 
属性 的 操作 , 即 通过 对 象 的 点 操作 符 完成 , 即 : 对 象 名 .[ 属 性 | 方法 ]。 

对 于 每 一 个 输入 对 象 ,通常 还 包含 一 组 通用 方法 ,如 blur() 方 法 ,将 当前 焦点 移 到 后 台 ， 
select() 方 法 ,选择 text 框 内 的 文本 。 包 含 的 事件 有 : onFocus: 当 text 获得 焦点 时 ,产生 该 
事件 。onBlur: 从 元 素 失 去 焦点 时 ,产生 该 事件 。onselect: 当 文字 被 选中 ,产生 该 事件 。 
onchange: 当 元 素 值 改变 时 ,产生 该 事件 。 

【 例 5-14】 设计 一 个 用 户 信息 输入 页 面 ,完成 用 户 个 人 信息 的 填写 , 当 用 户 提交 表单 
时 ,显示 用 户 的 输入 信息 。 

分 析 : 在 上 网 过 程 中 ,数据 输入 大 都 是 通过 表单 来 完成 的 ,如 何 提取 表单 中 的 用 户 输入 
数据 ,包括 : 文本 框 、 复 选 框 , 单 选 钮 ,列表 框 、 多 行文 本 框 等 输入 数据 ,以 及 对 输入 进行 控制 
和 有 效 性 验证 是 Web 编程 中 的 共性 和 基础 性 问题 。 

设 有 一 个 用 户 信息 输入 界面 ,如 图 5-13 所 示 。 








加 用 户 个 人 资料 
用 户 账户 。 [F30355 (用 户 账户 不 能 自行 修改 ) 
姓名 so 性 虽 G 册 C 女 
教育 羽 况 ， 
身价 证 号 码 : 
个 人 闻 征 : 


个 人 兴 填 : 隐 体 育 厂 音乐 区 茹 游 


自我 介绍 : 





景 多 允许 有 00 个 字 节 己 用 字 节 ， 及 5” 而 作 字 节 ， [72 | 


图 5-13 表单 输入 界面 
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在 上 述 表单 中 ,包括 了 常用 的 元 素 输入 类 型 。 除 了 要 获取 输入 元 素 的 数值 外 ,经 常 还 需 
要 对 用 户 输入 进行 控制 ,例如 : 检查 文本 框 输入 数据 的 合理 性 ,设置 文本 框 的 只 读 属性 , 限 
制 文 本 输入 的 字符 个 数 ,等 等 。 

对 应 上 述 输入 界面 ,代码 清单 如 下 : 

代码 清单 : person-add. htm 


<!DOCTYPE html > 

<html > 

<head> 

<meta charset = "utf — 8"> 

<style type = "text/css"> 

body{margin - top:10px; background - color: # FFF8EB;font — size:30px;} 
td{font - size:13px} 

</style> 

< script type = "text/javascript"> 


LU 
// 返 回 单 选 按钮 的 值 
function getsexval() 
{ 
var sexValue = ""; 
for (i=0;i<forml. sex. length;i++) 
{ 
if (forml. sex[ i]. checked) 
{ 
sexValue = form]l. sex[ i]. value; 
break; 
} 
} 
return sexValue; 
} 
W77771111111111111111111111111711111111711111111111111111111111111111111111111111111/ 
// 获 取 复 选 框 选择 ,多 个 复 选 框 元 素 可 以 设置 相同 的 name 属性 
function getcheckboxval() 
{ 
var likestr = ""; 
var length= document. forml. mylike. length; 
for(i=0;i<length;it++) 
{ 
if(document. forml .mylike[ i].checked) 
likestr += document. forml.mylike[i].value+";"; 
} 
return likestr. substring(0, likestr. length— 1); 
} 
L7777711111111111711111711111171111170171111111111111111110111111111111111111111111/ 
// 获 取 下 拉 列 表 输 入 , 取 < optin value =></option> 中 value 的 值 ,或 标记 的 文本 
function getlistboxval(obj) 
{ 
return obj. options[ obj. selectedIndex]. text; 
} 


MAA 
// 限 制 多 行文 本 域 输入 的 字符 个 数 , 避免 超过 数据 库 字 段 长 度 
function CountUpdate( strobj) 
{ 
var strlength = strobj. value. length; 
var maxnum = parseInt(document. forml. total. value); 
if (strlength> maxnum) 
{ 
alert(" 个 人 简介 最 多 不 超过 ”+ maxnum +“" 个 字符 !"); 
strobj. value = strobj.value. substring(0, strlength— 1); 
strlength -= 1; 
} 
document. forml .used. value = strlength; 
document. form1. remain. value = maxnum 一 strlength; 


} 
L7711111111111111111111111111111111111111111111111111111111111111111111111111111111/ 
// 验 证 身份 证 输入 位 数 是 否 正 确 
function checkuserid(str) 
‘ 
var Expression= /\d{15}|\d{17}[a—- zA-2]/; 
var objExp = new RegExp(Expression); 
if (objExp. test(str) == true) return true; 
else 
{ 
alert( "身份 证 位 数 应 该 为 15 位 或 18 位 !"); 
return false; 
} 
} 
L7011111111111111111111111111171111111111111111111111111111111111111111111111111111/ 
// 验 证 邮箱 地 址 是 否 正 确 
function checkemail(str) 
{ 
if (str =="") 
{ 
alert(" 用 户 邮 箱 不 能 为 空 !"); 
return false; 
} 
// 在 JavaScript 中 ,正则 表达 式 只 能 使 用 "/" 开 头 和 结束 ,不 能 使 用 双 引 号 
var Expression= /\w+ ([-+.'Nw+)x*G@N+([-.]NXw+)xN.Nw+([-.]Nw+)x/ 
Var objExp = new RegExp(Expression); 
if (objExp. test(str) == true) return true; 
else 
{ 
alert(" 用 户 邮 箱 格式 不 正确 !"); 
return false; 
} 
} 
LALLLLAALLLLLLLLLLLLLLLLLLLLLALLLLLLLLLLALLLLLLLLLALLLLLLLLLLALLLLLLLLLLLLAANLA 
// 提 交 表 单 前 对 输入 数据 进行 有 效 性 验证 ,最 后 提交 表单 
// 在 < forml > 中 ,未 设置 action 属性 ,程序 最 终 是 通过 form99 提交 到 服务 器 端的 
function formlsubmit() 
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{ 
// 用 户 账户 不 能 包含 汉字 字符 
if (escape(document. forml. useraccount. value). indexOf("%u")!= —1) 
{ 
alert(" 用 户 账户 不 能 包含 汉字 ,请 重新 输入 "); 
forml. useraccount. focus(); 
return false; 
} 
// 密 码 由 6- 20 位 的 字母 .数字 .下 画 线 、 句 点 组 成 
var Expression= /^*[A-2a—-z0-9]{1}([A- 2a-z0-9]|[._@]){5,19}$/; 
var objExp = new RegExp(Expression); 
if (objExp. test(forml.password. value) == false) 
{ 
alert( "密码 由 6 一 20 位 的 字母 数字、 点、 下 面 线 、@ 组 成 且 首 字符 为 字母 "); 
form1. password. focus( ); 
return false; 
} 
// 检 查 姓 名 不 能 为 空 
if (forml.username.value=="") 
{ 
alert(" 姓 名 不 能 为 空 !"); 
forml. username. focus(); 
return false; 
} 
// 检 查 身份 证 号 码 的 有 效 性 
if (!checkuserid( document. forml .userid. value)) 
{ 
forml. userid. focus( ); 
return false; 
} 
// 检 查 Email 的 有 效 性 
if (!checkemail(document. forml. email. value)) 
{ 
forml. email. focus(); 
return false; 
} 
// 提 取 各 输入 元 素 的 值 
var str = "个 人 基本 信息 :\n"; 
str += "姓名 : " + document. forml. username. value + "\n"; 
str += "性 别 : " + getsexval() + "\n"; 
str += "教育 状况 : " + getlistboxval(forml.grade) + "\n"; 
str += "个 人 兴趣 : " + getcheckboxval() + "\n"; 
str += "个 人 简介 : "+ document. forml.mybrief. value+ "\n"; 
// 将 得 到 的 数据 合并 成 一 个 串 , 赋 给 form99 的 hidden 元 素 , 提交 form99 
form99. totalinfo. value = str; 
form99. submit( ); 
} 
</script > 
</head > 
<body> 


<form name = "forml"> 


<table border = 
<tr height = "35"> 





= "border:1px solid red;padding — left:10px"> 


<td colspan= "2">< img src = "square.gif" valign = "absmiddle"> 用 户 个 人 资料 </td> 


</tr> 
<tr height = "1"> 
<td colspan= "2">< img src= "line2.gif"></td> 
</tr> 
<tr height = "30"> 
<td align = "right"> 用 户 账 户 : </td> 
<td> 





< input type = "text" name = "useraccount" value = "haoxw365" disabled>( 用 户 账户 不 能 自行 


修改 ) 
</td> 
</tr> 
<tr height = "30"> 
<td width= "100" align= "right"> 姓 名 : </td> 
<td> 
< input type = "text" name = "username" value =""> 性 别 
< input type = "radio" name = "sex" value = "male" checked> 男 
< input type = "radio" name = "sex" value = "female"> 女 
</td> 
</tr> 
<tr> 
<td align = "right"> 教 育 状况 : </td> 
<td align = "left"> 
< select name = "grade"> 
<option value= "博士 "> 博士 </option> 
<option valut 硕士 "> 硕士 </option> 
<option value = "本 科 ”selected > 本科 </option> 
</select> 
</td> 
</tr> 
<tr height = "30"> 
<td align = "right"> 身 份 证 号 码 : </td> 
<td> < input type = "text" name = "userid" maxlength= "18"> </td> 
</tr> 
<tr height = "30"> 
<td align= "right"> 个 人 邮箱 : </td> 
<td> < input type = "text" name = "email" size= "45"> </td> 
</tr> 







<tr> 
<tdalign= "right"> 个 人 兴趣 : </td> 
<td> gnbsp; 
< input type = "checkbox" name = "mylike" value = "体育 "> 体育 
< input type = "checkbox" name = "mylike" value= "音乐 "> 音乐 
< input type = "checkbox" name = "mylike" value = "旅游 "> 旅游 
</td> 
</tr> 


<tr height = "30"> 
<td align= "right"> 自 我 介绍 : </td> 
<td> 
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< textarea name = "mybrief" cols = "45" rows = "6" onKeyDown = "CountUpdate(this);" 
onKeyUp = "CountUpdate(this);"></textarea> 
</td> 
</tr> 
近 交 六 
<td colspan = "2" align = "center"> 最 多 允许 
< input type = "text" name = "total" value= "100" disabled> 个 字 节 已 用 字 节 : 
< input type = "text" name = "used" value = "0" disabled> 剩 余 字 节 : 
< input type = "text" name = "remain" value ="100" disabled> 
</td> 
</tr> 
<tr height = "30"> 
<td colspan= "2" align = "center"> 
< input type = "button" name = "myok" value = "确定 " onclick = "formlsubmit();"> 
< input type = "reset" name = "mycan" value = "取消 "> 
</td> 
</tr> 
</table> 
< input type = "hidden" name = "password" value = "111111"> 
</form> 
</table> 
< form name = "form99" method= "post" action = "personaddsave. jsp"> 
< input type = "hidden" name = "totalinfo" value = ""> 
</form> 
</body> 
</html > 


对 于 上 述 代码 ,说明 如 下 : 

(1) 在 表格 中 ,设置 < table > 标记 属性 border 王 "1" ,表格 .单元 格 都 含有 表格 线 。 若 
<table> 标 记 属 性 border 王 "0", 则 单元 格 无 边框 。 设 置 < table > 的 内 联 样 式 style 二 
"border:1px solid red" ,只 用 于 表格 的 四 个 边框 ,不 用 于 单元 格 。 

(2) 表单 提交 按钮 设计 为 Button 类 型 ,而 不 是 Submit 类 型 ,主要 是 增加 可 读 性 ,在 
formlsubmit() 中 进行 数据 的 有 效 性 验证 。 在 实际 开发 中 ,一 个 网 页 通常 不 止 一 个 表单 ,每 
个 表单 都 可 以 设置 action 属性 ,提交 表单 ,服务 端 将 执行 相应 的 服务 器 页 。 有 时 候 需 要 将 多 
个 表单 数据 赋 给 一 个 表单 ,一 起 提交 ,这 就 是 上 述 代 码 form99 的 用 途 。 

(3) 对 于 JavaScript 函数 ,参数 基本 上 有 两 类 ,一 类 是 字符 串 , 另 一 类 是 对 象 。 例 如 
checkemail() ,如 果 参 数 是 对 象 , 则 调用 时 可 使 用 checkemail(forml. email) ,如 果 是 在 标记 
的 事件 属性 中 调用 ,可 直接 写 checkemail(this) ,在 函数 内 部 再 取 对 象 的 value 值 。 如 果 参 
数 是 字符 串 ,实际 参数 就 写 为 forml. email . value,this. value, 即 当前 对 象 的 value 值 。 

(4) 表单 中 使 用 了 hidden 输入 ,主要 用 于 客户 端 和 服务 端 之 间 的 数据 交换 ,如 果 是 服 
务 器 页 (如 JSP) ,很 容易 把 服务 端的 数据 通过 hidden 传递 到 客户 端 。 例 如: <input type 一 
hidden name 一 "nowdate" value 二 "<% 二 new date() %>" ,这 样 客户 端 就 得 到 了 服务 器 上 的 
时 钟 。 

(5) 数据 有 效 性 验证 是 一 项 重要 的 工作 ,可 以 避免 在 数据 库 操作 时 ,出 现 数据 插入 、 更 
新 失败 等 操作 ,比如 用 户 实际 的 数据 比 数据 库 字段 定义 的 长 度 更 长 ,在 服务 端 则 会 引起 数据 


插入 操作 失败 。 
5.7.8 事件 对 象 event 


在 网 页 浏览 中 ,会 有 各 种 各 样 的 鼠标 和 键盘 操作 , 称 为 事件 (event) 。 在 JavaScript 中 
定义 了 一 个 事件 对 象 event, 封 装 了 相关 的 键盘 和 鼠标 操作 ,包括 键盘 按键 的 状态 .鼠标 的 位 
置 .鼠标 按钮 的 状态 等 信息 。 

1，event 对 象 常用 属性 

事件 对 象 event 常用 属性 见 表 5-28。 


表 5-28 事件 对 象 event 常用 属性 
































属 性 说 明 

clientX ,clientY 存储 鼠标 事件 触发 时 ,鼠标 指针 的 X、Y 坐标 

ScreenX ,ScreenY 存储 鼠标 事件 触发 时 ,相对 于 屏幕 的 槛 坐标 和 列 坐标 

和 存储 鼠标 事件 触发 时 被 单 击 的 鼠标 按键 ,0、1、2 分 别 代表 鼠标 左 键 ,鼠标 中 键 和 
鼠标 右键 

ctrlKey 存储 事件 发 生 时 ,Ctrl 键 的 状态 , 按 下 为 1, 否 则 为 0 

altKey 存储 事件 发 生 时 ,Alt 键 的 状态 , 按 下 为 1, 否 则 为 0 

shiftKey 存储 事件 发 生 时 ,Shift 键 的 状态 , 按 下 为 1, 否 则 为 0 

target 存储 事件 目标 节点 对 象 (触发 该 事件 的 节点 ), 如 生成 事件 的 元 素 ,文档 或 窗口 

bevtod 对 于 keypress 事件 ,存储 被 敲 击 的 键 的 Unicode 字符 码 。 对 于 keydown 和 
keyup 事件 ,存储 被 融 击 的 键 的 虚拟 键盘 码 

cancelBubble 如 果 事 件 句柄 想 阻 止 事件 传播 到 包容 对 象 ,必须 把 该 属性 设 为 true 


2. 可 能 的 事件 

在 浏览 器 中 可 能 的 事件 主要 有 : onclick (鼠标 单 击 )、ondblclick (鼠标 双击 )、 
onmousedown( 按 下 鼠标 按钮 ) .onmousemove( 鼠 标 移动 ) .onmouseout( 鼠 标 从 某 元 素 移 
开 ) ,onmouseover( 鼠 标 移 到 某 元 素 之 上 ) .onmouseup( 松 开 鼠 标 按键 ) .onkeydown( 按 下 键 
盘 按键 ) ,onkeypress( 按 下 并 松 开 键盘 按键 ) .onkeyup( 松 开 键 盘 按 键 ) .onfocus( 元 素 获 得 


页 或 一 幅 图 像 完 成 加 载 ) .onunload( 退 出 页 面 ) .onabort( 图 像 加 载 中 断 ) ,onerror( 加 载 文档 
或 图 像 时 出 错 ) .onresize( 调 整 窗 口 或 框架 的 大 小 ) .onreset( 单 击 重 置 按钮 ) .onsubmit( 单 击 
确认 按钮 ) 等 。 


个 输入 元 素 。 

说 明 : 在 表单 输入 中 ,默认 情况 下 , 按 回 车 键 , 输 入 焦点 不 会 发 生变 化 。 这 不 符合 我 们 
的 交互 习惯 ,我 们 的 一 般 习 惯 是 : 按 回 车 键 后 ,输入 焦点 将 自动 移 向 下 一 个 表单 元 素 。 

利用 事件 对 象 event, 当 输入 字符 为 回 车 键 时 ,转换 输入 焦点 ,代码 如 下 : 

< script type= "text/javascript"> 


function myenter (nextobj) 


{ 
if (event. keyCode == 13) 
nextobj. focus( ); 
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} 

</script > 

然后 在 每 一 个 Input 元 素 中 ,可 以 修改 onkeypress 事件 属性 为 onkeypress 一 "myenter 
(下 一 个 输入 元 素 )"。 例 如 : 


< form name = "form1"> 

< input type = "text" name = "useraccount" onkeypress = "myenter(form1. password)" /> 
< input type = "text" name = "password" onkeypress = "myenter(forml. username)" /> 
</form> 


则 用 户 输 入 完 用 户 账户 useraccount 后 , 按 回 车 键 ,输入 焦点 将 转 到 name 一 "password" 
的 输入 框 , 输 入 完 password 后 , 转 到 username 输入 框 。 


5.7.9 应 用 举例 


在 Web 系统 的 开发 中 ,表格 和 表单 是 使 用 最 多 的 页 面 元 素 ,利用 JavaScript 可 以 动态 
地 在 表格 中 插入 \ 删 除 表格 行 ,同时 也 可 以 隐藏 表格 行 和 单元 格 。 实 现 一 种 类 似 数据 库 中 记 
录 插 入 和 删除 操作 的 用 户 界 面 , 最 后 一 次 性 提交 到 Web 服务 器 。 

在 我 们 进行 GSL 系统 的 研发 中 ,设计 了 考试 模型 编辑 界面 ,对 于 每 一 类 题 , 列 出 题库 中 
的 题目 ,选择 需要 的 题目 ,并 给 定 分 值 ,最 后 提交 ,界面 设计 如 图 5-14 所 示 。 











图 5-14 考试 模型 编辑 页 面 


分 析 : 采用 < iframe > 来 显示 下 部 的 列表 ,正常 运行 时 ,列表 来 自 数 据 库 查询 所 得 数据 。 
在 列表 项 右 侧 , 单 击 “添加 ?按钮 , 则 相应 的 项 目 添 加 到 上 部 的 已 选 题目 列表 ,对 已 选 题目 列 
表 中 的 题目 ,如 果 要 放弃 选择 , 单 击 右 侧 的 “取消 选 定 ” 即 可 。 最 后 单 击 “ 确 定 ” 按 钮 ,将 所 选 
题目 列表 发 送 到 服务 器 ,更 新 数据 库 中 课程 考试 模型 数据 。 

界面 设计 两 个 HTML 文件 ,一 个 为 主体 页 面 对 应 的 HTML 文件 ,文件 名 为 selelist. 
htm , 另 一 个 为 < iframe > 中 显示 的 文件 .文件 名 为 datalist. htm。 

(1) 已 选 题目 页 面 selelist. htm 代码 清单 : 


<html > 


<head > 
<meta charset = "utf 一 8"> 
< Script> 
AAAI 
// 动 态 在 表格 中 添加 一 行 
// 子 窗口 调用 的 函数 , 必须 单独 写 在 一 个 独立 的 脚本 定义 段 内 , 否则 出 错 
function addonerow( str) 
{ 
var rowsnum = document.all. tablel. rows. length; 
Var newRow, newCell; 
// 在 最 后 一 行 的 前 面 插入 一 行 , 每 行 4 个 单元 格 , 并 设置 行 的 id 属性 
var newRow = tablel. insertRow( rowsnum — 1); 
newRow. jd = "row" + rowsnum; 


for(var j= 0;j<4;j++) 


{ 

newCell = newRow. insertCell(j); 
} 
// 为 新 添加 的 行 的 各 个 单元 格 赋值 


var s = new Array(2); 

var chl = "\10"; 

s= str. split(chl); 

newRow. cells[0].innerText = s[0]; 
newRow. cells[0].width="15%"; 
newRow. cells[0].align = "left"; 


newRow. cells[1]. innerText = s[1]; 
newRow. cells[1].width="50%"; 
newRow. cells[1].align = "left"; 


newRow. cells[2]. innerHTML = "分 数 : < input type = 'text' name = 'score' size= '3' value= '0' 
onblur =\"checkscore( this)\">"; 

newRow. cells[2].width="10%"; 

newRow. cells[2].align = "center"; 


newRow. cells[3]. innerHTML = "< input type = 'button' name = 'btn' value = ' 取 消 选 定 ' onclick = 
\"cancelselect('row" + rowsnum + "')\">"; 
newRow. cells[3].align = "center"; 
// 为 单元 格 设 置 样式 
newRow. cells[0]. style.cssText = "font ~ size:15px; color:blue;"; 
newRow. cells[1]. style.cssText = "font ~ size:15px; color:blue;"; 
newRow. cells[2]. style.cssText = "font ~ size:15px; color:blue;"; 
// 移 动 滚动 条 到 窗口 底部 ,也 可 用 window. scrollBy() 
window. scrollTo(0, document. body. scrollHeight); 
} 
</script > 


<script> 
L71117111111111111117111111111111171111111111111111111111111111111111111111111111111/ 
// 检 查 输入 的 分 数 是 否 合适 


function checkscore(obj) 
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{ 
var scorestr = obj. value; 
var Expression= /^\d{1,3} $ /; 
var objExp = new RegExp(Expression); 
if (objExp. test( scorestr) == false) 
{ 
alert ("数字 为 不 大 于 100 的 整数 1"); 
obj. focus(); 
return false; 
i 
return true; 
} 
WAM 
// 隐 藏 一 个 过 所 标记 的 区 域 , 如 div、 表 格 行 、 单 元 格 等 
function cancelselect( idstr) 
{ 
if (document.all[idstr]. style. display == "none") 
document.all[idstr]. style. display = "block"; 
else 
document.all[idstr]. style. display = "none"; 


} 


L7117111111111111111111111111111111111111111111111111111111111111111111111111111111/ 
// 将 用 户 选择 的 题目 ,形成 itemlist 列表 传 回 服务 器 保存 到 数据 库 
8 
function formlsubmit() 
{ 
var rowsnum = document.all. tablel. rows. length; 
// 只 有 三 行 ,第 一 行 是 提示 行 ,第 二 行为 标题 行 ,最 后 一 行为 "确定 "按钮 , 则 表明 无 数据 
//rownums 包括 隐藏 的 行 
if (rowsnum == 3) 
return false; 
// 第 一 行 .第 二 行 、 最 后 一 行 不 是 题 日 数据 ,隐藏 的 行 不 提交 
// 将 表格 中 的 内 容 形成 一 个 考试 题 串 ,题目 内 部 分 用 "\10" 分 隔 , 题 目 之 间 用 "\20" 分 开 
var tempstr = "", sl, s2, s3; 
var i=0,totalscore=0; 
for (i=2;i<rowsnum— 1;i++) 
if (tablel. rows[i]. style.display!= "none") 
. 
sl1 = tablel.rows[i].cells[0]. innerText; 
s2 = tablel.rows[i].cells[1]. innerText; 
// 当 记录 只 有 一 行 时 (包含 隐藏 行 ), score 未 形成 数组 
if (rowsnum== 4) 
S3 = forml. score. value; 
else 
s3= forml. score[i— 2].valuve; 
tempstr += sl + "\10" + s2 + "\10" + s3 + "\20"; 
totalscore += parseInt(s3,10); 


// 原 先 有 数据 ,但 取消 了 所 有 的 行 , 即 指定 的 题目 列表 变 为 空 
if (tempstr!= "" && totalscore!= 100) 


{ 





alert(" 已 选 题目 总 分 为 : ”+ totalscore + ", 总 分 应 为 100 分 ") 
return false; 
|; 
forml. itemlistnew. value = tempstr; 
forml. submit( ); 
} 
</script > 
</head> 
<body style = "margin— top:0px;"> 
< form name = "forml" action= "tableformmainsave. jsp"> 
< input type = "hidden" name = "itemlistnew" value = ""> 
<table id= "tablel" width= "100% "> 
<tr height = "35" id = "row0"> 
<td colspan = "4"> 已 选 题目 </td> 
</tr> 
<tr height = "35" id = "rowl"> 
<td width= "15s$ "> 题目 代码 </td> 
<td width = "50g% "> 题目 名 称 </td> 
<td width = "10s$ "> 分 值 比 例 </td> 
<td> 操 作 </td> 
</tr> 
<tr height = "30"> 
<td colspan = "4"> 
< input type = "button" name = "btn2" value = "确定 ” onclick = "formlsubmit() "> 
< input type = "button" name = "btn2" value= "取消 "> 
</td> 
</tr> 
</table> 
</form> 
<table id= "table2" width= "100% "> 
<tr> 
<td> 
< iframe name = "datalistframe" src = "datalist. html" width = "100%" height = "330" 
frameborder = "0" scrolling= "Yes"> 
</iframe> 
</td> 
</tr> 
</table> 
</body > 
</html > 


(2) < iframe > 内 显示 的 文件 datalist. htm ,代码 清单 如 下 : 


<html > 

<head > 

<meta charset = "utf 一 8"> 第 
<script> 
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// 一 个 网 页 只 要 是 打开 的 , 它 的 DOM 对象 就 可 以 访问 .只 要 清楚 窗口 之 间 的 关系 ,， 
// 就 可 以 实现 不 同窗 口 之 间 的 互 操作 
// 例 如 ,本 例 中 实现 iframe 内 部 页 面 直接 调用 该 iframe 所 属 父 窗口 自 定义 函数 的 方法 
// 不 同 的 浏览 器 支持 不 同 , 亚 支 持 下 列 代 码 ,在 Chrome 中 不 支持 
function toaddonerow(itemnum) 
{ 
var chl = "\10"; // 定 义 一 个 分 隔 符 , 分 隔 一 行 中 不 同 列 数据 
str = eval("item" + itemnum + "1"). innerText + chl; 
str += eval("item" + itemnum + "2"). innerText; 
// 调 用 父 窗口 函数 ,在 已 选 列表 中 新 添加 的 题目 显示 
window. parent. addonerow( str); 
} 
</script > 
</head> 


<body> 
<table class = "table frame" width= "100%" cellpadding = "0" cellspacing = "0"> 
<tr height = "35"> 

<td width= "15 名 "> 题 日 代码 </td> 

<td width="75 名 "> 题 日 名 称 </td> 

<td> 操 作 </td> 
</tr> 
<tr height = "30"> 

<td id = "iteml1"> 201107001 </td> 

<td id= "iteml2"> Linel...</td> 

<td><a href =" 井 "onclick = "toaddonerow('1');return false;"> 添 加 </a></td> 





</tr> 
<tr height = "30"> 
<td id = "item21"> 201107002 </td> 


<td id = "item22"> Line2...</td> 
<td><a href ="#" onclick= "toaddonerow('2') ;return false;"> 添 加 </a></td> 
</tr> 
</table> 
</body > 
</html > 
上 述 页 面 较 好 地 使 用 了 表单 .表格 操作 ,同时 用 到 了 < iframe > 等 技术 ,在 Web 开发 中 
具有 较 好 的 参考 价值 。 主 要 技术 点 有 : 
(1) 子 窗口 与 父 窗口 网 页 之 间 的 互 操作 ,一 个 页 面 中 调用 另 一 个 页 面 的 函数 的 方法 ,以 
及 为 另 一 个 页 面 中 变量 的 赋值 。 不 同 浏览 器 对 窗口 互 操作 的 实现 不 同 , 本 例 中 的 代码 在 IE 
中 正常 运行 ,在 Google Chrome 浏览 器 中 .添加 按钮 对 应 的 调用 父 窗 口 的 函数 不 能 正常 
运行 。 
(2) 对 于 < form > 中 输入 元 素 name 属性 重 名 问题 ,在 JavaScript 中 ,允许 多 个 输入 域 具 
有 相同 的 name 值 。 例 如 : 本 题 中 的 分 数 , 如 果 有 两 行 或 以 上 , 则 有 多 个 name 王 "score "的 
输入 文本 框 ,对 于 多 个 score,JavaScript 将 创建 一 个 数组 对 象 来 存储 ,数组 名 为 score。 但 
是 ,在 系统 运行 时 ,如 果 只 有 一 行 , 则 只 能 创建 一 个 简单 的 DOM 对象 score, 而 不 是 数组 。 
这 是 在 程序 调试 时 最 容易 遇 到 的 问题 。 
(3) 表格 的 动态 处 理 ,添加 行 、 删 除 行 和 隐藏 行 都 可 以 通过 Table 对 象 方法 来 实现 。 单 
元 格 样式 设置 是 一 个 难点 ,各 个 列 的 样式 类 似 , 但 必须 分 别 设 置 。 


5.8 网 页 异步 通信 AJAX 技术 


在 Web 系统 中 ,前 端 和 后 端的 交互 是 通过 提交 表单 完成 的 。 当 提交 表单 后 ,客户 端 表单 
数据 被 发 送 到 服务 端 ,由 服务 端 程序 进行 处 理 , 并 返回 处 理 结果 ,在 客户 端 显示 。 这 个 过 程 是 
在 form 元 素 中 设 定 的 ,其 action 属性 指定 了 接受 客户 端 数 据 的 服务 端 程序 页 面 ,target 属性 
则 指定 了 服务 端 程序 输出 的 显示 窗口 ,这 些 输出 被 发 送 到 客户 端 指定 的 窗口 显示 。 

在 两 个 页 面 的 交互 中 ,传统 的 服务 端 输出 的 目标 窗口 通常 是 当前 窗口 , 即 覆 盖 客 户 端 页 
面 ,当然 也 可 以 指定 其 他 的 输出 窗口 。 有 时 候 , 我 们 不 能 覆盖 客户 端的 整个 窗口 ,而 需要 仅 
仅 更 新 客户 端 页 面 的 局 部 ,AJAX 技术 就 是 为 此 目标 而 设计 的 , 它 广泛 应 用 于 许多 需要 实时 
刷新 页 面 局 部 的 应 用 中 。 


5.8.1 AJAX 的 概念 


在 Web 应 用 中 ,用 户 在 网 页 上 输入 数据 时 , 单 击 “ 提 交 ” 按 钮 ,客户 端 浏览 器 则 把 这 些 信 
息 发 送 到 服务 器 端 ,服务 器 根据 用 户 的 操作 发 送 一 个 新 页 面 到 客户 端 。 例 如 ,在 一 个 登录 页 
面 中 , 当 用 户 提交 表单 后 ,服务 器 将 比较 用 户 在 表单 中 输入 的 数据 与 数据 库 中 保存 的 登录 信 
息 是 否 一 致 。 如 果 用 户 输入 的 数据 不 正确 ,服务 器 就 把 与 原来 相同 的 登录 页 面 重 发 给 用 户 ， 
而 这 个 页 面 与 原来 的 页 面相 比 可 能 只 是 多 了 “登录 失败 ”的 消息 。 用 户 每 发 出 一 个 请 求 , 整 
个 网 页 就 要 被 刷新 一 次 , 即 页面 的 加 载 与 用 户 的 请 求 是 同步 的 。 

刷新 整个 页 面 除了 带 来 较 大 的 网 络 流量 外 ,对 于 一 些 聊 天 类 的 网 站 ,频繁 的 页 面 刷新 必 
然 会 产生 闪烁 ,影响 用 户 的 视觉 体验 。2005 年 2 月 ,Jesse James Garrett? 在 一 篇 文章 中 提 
出 了 AJAX 技术 , 即 Asynchronous JavaScript And XML (异步 JavaScript 和 XML) 的 缩写 ， 
AJAX 提供 与 服务 器 异步 通信 的 能 力 , 一 个 最 简单 的 应 用 是 无 须 刷新 整个 页 面 而 在 网 页 中 
更 新 一 部 分 数据 。 

如 果 采 用 AJAX 技术 , 当 用 户 提交 表单 后 ,如 果 登 录 失 败 , 将 不 再 刷新 整个 网 页 ,而 是 
仅仅 在 页 面 上 增加 了 “登录 失败 ”的 消息 文本 , 即 AJAX 技术 可 以 实现 网 页 的 局 部 刷新 ,而 
页 面 上 的 所 有 没有 被 刷新 的 信息 都 是 提交 表单 前 页 面 的 内 容 。 这 无 论 是 对 于 服务 器 的 
CPU 开销 还 是 对 网 络 的 传输 开销 ,无 疑 都 减轻 了 不 少 压 力 , 也 避免 了 页 面 闪烁 现象 的 发 生 。 


5.8.2 XMLHttpRequest 对 象 


从 原理 上 讲 ,AJAX 技术 不 是 一 项 新 的 技术 , 它 和 传统 的 Web 不 相同 的 是 在 浏览 器 端 
增加 了 一 种 新 的 响应 层 , 而 不 是 传统 的 “提交 网 页 -返回 网 页 "同步 模式 。 它 只 是 在 一 个 网 页 
上 做 操作 ,操作 发 送 到 服务 端 ,服务 端的 返回 只 是 更 新 网 页 的 一 个 局 部 ,就 如 传统 的 桌面 程 
序 一 样 。AJAX 技术 主要 涉及 JavaScript DOM XML 和 HTTP 等 内 容 。 


@@ Jesse James Garrett, 美 国 用 户 体验 咨询 公司 Adaptive Path 联合 创始 人 。 出 版 (用 户 体验 要 素 : 以 用 户 为 中 心 的 
Web 设计 )(The Elements of User Erperience: User-Centered Design for the Web) 一 书 ,提出 从 抽象 到 具体 5 个 层级 的 
概念 。 他 在 用 户 体验 领域 的 贡献 还 包括 “视觉 词典 (the Visual Vocabulary)”, 一 个 为 规范 信息 架构 文档 而 建立 的 开放 符 
号 系统 ,该 系统 在 全 球 众多 企业 中 得 到 广泛 应 用 。 
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1. XMLHttpRequest 对 象 

1999 年 春 , 在 IE 5. 0 中 ,增加 了 一 个 新 的 ActiveX 控件 , 即 XML HTTP 请 求 对 象 
XMLHttpRequest(XHR) ,这 个 对 象 主 要 在 IE 中 使 用 ,用 于 向 服务 端 发 出 异步 通信 请 求 。 
随后 ,其 他 浏览 器 开始 支持 XHR 对 象 ,并 成 为 W3C 标准 的 一 部 分 。XMLHttpRequest 对 
象 位 于 客户 端 浏览 器 中 ,是 用 来 实现 网 页 与 Web 服务 器 之 间 异 步 通信 的 对 象 ,通过 它 可 以 
在 不 进行 整个 网 页 刷新 的 情况 下 向 服务 器 发 出 请 求 .接收 响应 等 工作 。 

XMLHttpRequest 对 象 提供 了 对 HTTP 协议 的 完全 访问 ,包括 做 出 POST 和 HEAD 
请 求 以 及 普通 的 GET 请 求 的 能 力 。XMLHttpRequest 可 以 同步 或 异步 返回 Web 服务 器 的 
响应 ,并 且 能 以 文本 或 者 一 个 DOM 文档 形式 返回 内 容 。XMLHttpRequest 对 象 是 AJAX 
的 Web 应 用 程序 架构 的 一 项 关键 功能 。AJAX 技术 工作 机 制 如 图 5-15 所 示 。 
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图 5-15 AJAX 技术 工作 机 制 


对 于 一 个 支持 AJAX 的 Web 面 来 说 ,与 服务 器 进行 异步 数据 通信 的 过 程 如 下 : 

(1) 当 要 求 进行 与 服务 器 异步 通信 的 某 一 事件 发 生 时 ,事件 处 理 程序 将 调用 XHR, 设 
置 该 对 象 相关 的 属性 参数 ,如 指定 服务 端 程序 页 面 ,设置 服务 器 返回 数据 处 理 函 数 。 

(2) 由 XHR 向 服务 器 发 出 请 求 ,请 求 通过 Internet 发 送 到 Web 服务 器 。 当 服务 器 收 
到 请 求 后 ,运行 指定 的 服务 器 端 程序 。 

(3) 服务 器 端 程序 执行 中 如 果 包 含 数据 库 访问 的 命令 , 则 连接 数据 库 服 务 器 完成 数据 
库 的 相关 操作 ,结果 返回 到 Web 服务 器 。 

(4) Web 服务 器 将 服务 器 页 面 输出 结果 通过 Internet 返回 到 客户 端 ,浏览 器 将 这 些 响 
应 信息 交 给 Web 页 面 的 XHR 对 象 , 由 相应 的 处 理 函 数 处 理 服务 器 返回 的 数据 。 

(5) 浏览 器 启动 相应 的 处 理 程 序 , 通 过 文档 的 DOM 模型 完成 页 面 的 更 新 工作 ,例如 : 
将 返回 结果 更 新 DOM 元 素 。 

采用 AJAX 技术 ,其 核心 是 XML HTTP 请 求 对 象 XMLHttpRequest。XMLHttpRequest 
是 一 种 浏览 器 对 象 , 可 用 于 模拟 HTTP 的 GET 和 POST 请 求 。 当 一 个 网 页 需要 和 服务 端 
进行 异步 通信 时 ,客户 端 浏览 器 创建 XMLHttpRequest, 并 设置 参数 ,指定 服务 器 端的 交互 
页 面 和 处 理 服务 器 返回 的 函数 ,完成 两 个 网 页 之 间 的 异步 通信 。 有 具体 的 网 页 更 新 工作 可 通 
过 当前 页 面 的 DOM 模型 完成 ,配合 JavaScript 可 以 实现 页 面 数据 在 无 刷新 下 的 定时 数据 
更 新 ,在 聊天 室 ,文字 直播 上 有 良好 的 页 面 效果 。 

2. 创建 XMLHttpRequest 对 象 

在 使 用 XMLHttpRequest 对 象 之 前 ,必须 先 创建 一 个 XMLHttpRequest 对 象 。 由 于 
XMLHttpRequest 不 是 一 个 W3C 标准 ,不 同 的 浏览 器 对 XMLHttp 的 支持 不 同 ,主要 表现 





在 创建 XMLHttpRequest 对 象 实例 的 方法 不 同 。 正 浏览 器 把 XMLHttpRequest 实现 为 一 
个 ActiveX 对 象 ,其 他 浏览 器 (如 FireFox、Safari 和 Opera) 把 它 实现 为 一 个 本 地 JavaScript 
对 象 。 由 于 存在 这 些 差别 ,JavaScript 代码 中 必须 包含 有 关 的 逻辑 ,从 而 使 用 ActiveX 技术 
或 者 使 用 本 地 JavaScript 对 象 技术 来 创建 XMLHttpRequest 的 一 个 实例 。 

(1) IE 浏览 器 中 创建 XMLHttpRequest 对 象 

在 I 浏览 器 中 ,使 用 ActiveXObject 创建 XMLHttpRequest 对 象 ,一 般 形 式 是 : 


Varhttp request = new ActiveXObject("Microsoft.XMLHTTP"); 


其 中 ,Microsoft. XMLHTTP 为 ProgID。 在 Windows 操作 系统 中 .存在 过 多 个 类 似 的 
ProgID, 包括 Microsoft. XMLHTTP、Msxml2. ServerXMLHTTP、 Msxml2. XMLHTTP 
等 。 简 单 地 讲 ,这些 不 同 的 ProgID 与 下 浏览 器 的 版 本 有 关 。 究 竟 应 该 指定 怎样 的 ProgID 
呢 ? 可 以 使 用 下 列 代码 来 检测 浏览 器 支持 的 ProgID， 


var progIDs = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", 
"Msxml12. XMLHTTP. 3.0", "Msxml2.XMLHTTP", "Microsoft. XMLHTTP" ]; 
for (var i = 0; i< progIDs. length; i++) { 
try 
var http_request = new ActiveXObject(progIDs[i]); 
return http_request; 
} 
catch (ex) {} 
} 
return null; 


} 


上 述 代码 从 最 新 的 版 本 开始 检查 ,只 要 找到 一 个 系统 中 存在 的 版 本 即 可 退出 。 对 于 这 
些 不 同 的 版 本 ,并 不 都 是 为 了 IE 浏览 器 安装 的 ,有 的 需要 单独 安装 ,有 的 随 MS Office, MS 
SQL Server 一 并 安装 。 对 于 IE 浏览 器 而 言 .Msxml2.XMLHTTP 是 系统 自 带 的 组 件 ,其 
他 版 本 的 Msxml2. XMLHTTP 并 不 一 定 在 系统 中 存在 。 

根据 上 述说 明 , 在 下 浏览 器 中 ,使 用 ActiveXObject 方式 创建 XmlHttp 对 象 ,代码 
如 下 : 


if (window. ActiveXObject) 
{ 
try{ 
http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
} 
catch(e){ 
try{ 
http_request = new ActiveXObject("Microsoft. XMLHTTP"); 
} 
catch(e) { alert( ' 浏 览 器 不 支持 ajax'); } 
} 
} 


(2) 其 他 浏览 器 中 创建 XMLHttpRequest 对 象 
除了 匡 浏 览 器 ,其 他 浏览 器 采用 本 地 JavaScript 对 象 创建 XMLHttpRequest 对 象 ,这 
也 是 W3C 标准 规定 的 创建 XMLHttpRequest 对 象 的 方法 。 一 般 形式 如 下 : 
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http request = new XMLHttpRequest(); 


在 创建 XMLHttpRequest 对 象 的 方法 上 ,IE 浏览 器 不 同 于 其 他 浏览 器 。 后 来 微软 开始 
意识 到 这 个 问题 给 微软 带 来 的 不 利 影响 ,在 正 7 以 后 的 版 本 中 ,开始 使 用 W3C 标准 规定 的 方 
法 创建 XMLHttpRequest 对 象 。 也 就 是 说 ,对 微软 正 7 之 后 的 版 本 和 非 正 浏览 器 ,创建 
XMLHttpRequest 对 象 方法 是 一 样 的 ,从 此 ,XMLHttpRequest 对 象 的 创建 方法 开始 走向 统一 。 

根据 以 上 分 析 , 要 保证 AJAX 页 面 在 不 同 的 浏览 器 中 功能 正常 ,需要 根据 不 同 的 浏览 
器 选择 创建 XMLHttpRequest 对 象 的 不 同方 法 。 对 浏览 器 类 型 的 区 分 , 既 可 以 通过 浏览 器 
对 象 navigator 来 实现 ,也 可 以 通过 检查 浏览 器 是 否 提供 对 XMLHttpRequest 对 象 和 
ActiveX 对 象 的 支持 来 实现 。 如 果 浏览 器 支持 ActiveX 对 象 ,就 可 以 使 用 ActiveX 来 创建 
XMLHttpRequest 对 象 。 否 则 ,就 要 使 用 本 地 JavaScript 对 象 技术 来 创建 。 

创建 有 具有 跨 浏 览 器 功能 的 XMLHttpRequest 对 象 函数 代码 如 下 :; 


function createXMLHttpRequest() 








{ 


Var http_request =null; 
if (window. XMLHttpRequest){ 


//IE 7 及 更 高 版 本 ,其 他 浏览 器 


http_request = new XMLHttpRequest(); 


}else if (window. ActiveXObject){ 


//IE 7 以 前 的 版 本 


http_request = new ActiveXObject("Microsoft. XMLHTTP" ); 


} 


目前 ,对 于 市 场 上 的 主流 浏览 器 ,已 经 全 面 支持 XMLHttpRequest 对 象 ,在 创建 对 象 的 
方法 上 ,IE 浏览 器 和 其 他 浏览 器 已 经 统一 ,这 为 保证 页 面 的 跨 浏览 器 支持 提供 了 方便 。 

3. XMLHttpRequest 对 象 属性 和 方法 

XMLHttpRequest 对 象 常用 属性 及 方法 见 表 5-29。 


表 5-29 XMLHttpRequest 常用 属性 及 方法 




















常用 属性 

onreadystatechange 状态 改变 时 发 生 的 事件 ,可 以 将 它 与 一 个 JavaScript 函数 绑 定 

请 求 状态 。 有 5 个 可 能 的 取 值 (0: 未 初始 化 ,1: 正 在 加 载 ,2: 已 加 载 ， 
readyState 本 

3: 交 互 中 ,4 :完成 ) 
responseText 服务 器 响应 ,表示 为 一 个 串 
responseXML 服务 器 响应 ,表示 为 XML。 可 以 解析 为 一 个 DOM 对 象 
status 服务 器 HTTP 状态 码 。 例 如 200:OK,404:Not Found, 等 等 
statusText HTTP 状态 码 相 应 文本 。 例 如 OK 或 Not Found( 未 找到 ) 等 





常用 方法 





open(method, url, asynch) 


建立 对 服务 器 的 请 求 , 即 设置 对 应 服务 器 端的 异步 通信 程序 , URL 
为 服务 器 端 程序 的 URL 




















send(content) 向 服务 器 发 送 请 求 

setRequestHeader(header, 把 指定 首部 设置 为 所 提供 的 值 , 在 设置 任何 首部 之 前 必须 先 调用 
value) open() 

abort() 停止 当前 请 求 

getAllResponseHeaders() 把 HTTP 请 求 的 所 有 响应 首部 作为 键 / 值 对 返回 
getResponseHeader( header) 返回 指定 首部 的 串 值 


下 面 介 绍 这 几 个 方法 的 应 用 : 

(1) void open(string method, string url,boolean asynch[ ,string username J[ ，string pwd]) 

建立 对 服务 器 的 调用 ,这 是 初始 化 一 个 请 求 的 纯 脚 本 方法 ,参数 说 明 如 下 : 

method: 必 选 参数 ,提供 调用 的 特定 方法 (GET .POST 或 PUT) 。 

url: 必 选 参数 ,所 调用 资源 的 URL, 即 服务 器 端 处 理 程序 。 

asynch: 必 选 参数 ,指示 这 个 调用 是 异步 的 还 是 同步 的 。 默 认 值 为 true, 如果 为 false， 
处 理 就 会 等 待 , 直 到 从 服务 器 返回 响应 为 止 。 

username: 可 选 参数 ,表示 用 户 名 ,用 于 身份 验证 。 

pwd: 可 选 参数 ,表示 用 户 密码 ,用 于 身份 验证 。 


(2) void send([ content]) 


向 服务 器 发 出 请 求 。 如 果 请 求 声明 为 异步 的 ,这 个 方法 就 会 立即 返回 ,否则 它 会 等 待 直 
到 接收 到 响应 为 止 。 可 选 参数 可 以 是 DOM 对 象 的 实例 .输入 流 ,或 者 串 。 传 人 这 个 方法 的 
内 容 会 作为 请 求 体 的 一 部 分 发 送 。 

(3) void setRequestHeader(string header, string value) 

HTTP 请 求 中 一 个 给 定 的 首部 设置 值 。 它 有 两 个 参数 : header 表示 要 设置 的 首部 ; 
value 表示 首部 的 值 。 需 要 说 明 ,这 个 方法 必须 在 调用 open() 之 后 才能 调用 。 


(4) void abort() 
停止 请 求 的 方法 。 


(5) string getAllResponseHeaders() 
返回 所 有 响应 的 HTTP 头 , 首 部 包括 Content-Length、Date 和 URI。 


(6) string getResponseHeader(string header) 


返回 指定 的 首部 值 。 


【 例 5-16】 设计 一 个 用 户 注册 的 页 面 .使 用 AJAX 技术 完成 用 户 账户 的 检测 。 

分 析 : 用 户 账户 注册 是 Web 开发 中 最 常用 的 功能 ,在 填写 表单 详细 信息 以 前 ,检测 申 
请 的 账户 是 否 存 在 ,可 以 避免 提交 表单 后 ,发现 账户 已 经 存在 而 使 得 用 户 重新 填写 。 

设 注册 页 面 (局 部 ) 设 计 如 图 5-16 所 示 。 














二 检测 用 户 名 一 





:[ | 回 | 天 网 看 不 考 “ 拓 这 和 蕉 证 码 ， 区 分 大 小写 
图 5-16 用 户 注册 页 面 (部 分 ) 


用 户 注 册页 面 涉及 4 个 文档 : 四 注册 页 面 user-add. htm。 四 用 户 名 检测 页 面 user- 
checkaccount. jsp。@ 验 证 码 显 示 verificationcode. jsp。@ 用 户 信 息 保 存 页 面 user- 
addsave. jsp。 后 三 个 页 面 均 为 服务 器 页 ,有 关 AJAX 的 是 注册 页 面 。 相 关 代 码 如 下 : 

(1) 注册 页 面 user-add. htm 代码 清单 如 下 : 


<! DOCTYPE htm] > 
<html > 
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<head> 
<meta charset = "utf — 8"> 
< script type = "text/javascript"> 
A 
function PromptAccount Input() 
{ 
RtnAreaID. innerHTML = "用 户 账户 是 由 字母 数字 构成 的 , 不 能 包含 汉字 字符 "; 
} 
function PromptAccountCheck() 
{ 
RtnArealID. innerHTML = "<a href = '#' onclick = 'AccountCheck(forml.useraccount)'>-- 检测 
用 户 账户 --</a>"; 
} 
71771711717111111117111111111111111111111111111111111111111111111111111111111111111/ 
function RccountCheck(obj) 
' 
var useraccount = obj. value; 
if(useraccount == "") 
{ 
window.alert(" 用 户 账户 不 能 为 空 !"); 
obj. focus(); 
return false; 
} 
if (escape(forml. useraccount.value). indexOf(" %u")!= -1) 
{ 
alert(" 用 户 账户 不 能 包含 汉字 , 请 重新 输入 "); 
obj. focus(); 
return false; 
} 
//6 -8 位 的 字母 数字、 下面 线 、 句 点 .@, 组 成 ,不 能 包含 汉字 
var Expression= /*[A—- Za—-z]{1}([A-2a—-z0-9]|[._@]){5,8}$ /; 
var objExp = new RegExp(Expression); 
if (objExp. test(useraccount) == false) 
alert(" 用 户 账 户 由 6- 8 位 字母 数字、 点 、 下 面 线 .@ 组 成 , 首 字符 为 字母 ."); 
obj. focus(); 
return false; 
. 
RtnAreaID. innerHTML = "请 等 待 …… Wy 
// 初 始 化 对 象 并 发 出 XMLHttpRequest 请 求 
http_request = false; 
//IE 7 以 后 版 本 ,或 其 他 浏览 器 
证 (window. XMLHEttpRequest) 
{ 
http_request = new XMLHttpRequest(); 
} 
else //IE7 以 前 版 本 
if (window.ActiveXObject) 
i 
try{ 
http request = new RctiveXObject("Msxm12. XMLHTTP" ) ; 


} 
catch(e){ 
try{ 
http request = new ActiveXObject("Microsoft. XMLHTTP" ); 
} 
catch(e) { alert(' 浏 览 器 不 支持 ajax'); } 
} 
F 
证 (!http_request) 
alert(" 不 能 创建 XMLHTTP 实例 !"); 
return false; 
} 
// 指 定 处 理 服务 端 返回 数据 的 函数 
http_request. onreadystatechange = CheckReturn; 
// 发 出 HTTP 请 求 
http_request. open("GET", "newuser - accountcheck. jsp?useraccount = " + useraccount, true); 


http_request. send(nul1); 


} 
LNLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL 
// 处 理 服务 器 返回 的 信息 , 即 JSP 页 面 的 输出 
function CheckReturn() 
{ 
if (http_request. readyState == 4) 
{ 
if (http_request. status == 200) 
RtnArealD. innerHTML = http_request. responseText; 
else 
window.alert(http_request. status); 
} 
} 
L7117711111111111111711711111111111711111111111111111111111111111111111111111111111111/ 
// 重 载 验证 码 
function VerifyCodeNew( obj) 
{ 
var timenow = new Date().getTime(); 
obj. src= "vcode - create. jsp?d = " + timenow; 
} 
</script> 
</head> 
<body> 
<form name = "forml" method= "post" action = "user - addsave. jsp"> 
<table> 
<tr> 
<td width= "20 $% ">< span class = "red"> x </span> 用 户 账户 : </td> 
<td width= "40% "> 
< input type = "text" name = "useraccount" onfocus = "PromptAccountInput()" 
onblur = "PromptAccountCheck()"/> 
</td> 
<td id= "RtnAreaID"> 
<a href = ' 井 'onClick = 'RccountCheck(formnl.useraccount)'>-- 检测 用 户 账户 --</a> 
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</td> 
</tr> 
Er 
<td> 验 证 码 : </td> 
<td> 
< input type = "text" name = "myverifycode" value= ""/> 
< img src= "vcode - create. jsp" width= "60px" height = "22px" id= "vcode"> 
<a href = "VerifyCodeNew( document. getElementById( 'vcode'))"> 看 不 清 </a> 
</td> 
<td> 请 输入 验证 码 , 区 分 大 小 写 </td> 
</tr> 
</table> 
</form> 
</body > 
</html > 


对 于 AJAX, 比较 麻 烦 的 是 创建 XMLHttpRequest 对 象 ,早期 的 IE 和 其 他 浏览 器 不 
同 , 现 在 已 经 统一 。 上 述 代 码 在 微软 的 IE 11 浏览 器 和 Google Chrome 浏览 器 中 调试 通过 。 
(2) 用 户 名 检测 页 面 user-checkaccount. jsp, 代 码 清单 如 下 : 


<%(@ page contentType = "text/html;charset = GBK" %> 
<%(@ page import = "java. sql. * "%> 
< jsp:useBean id= "gslpub" scope = "page" class = "pub. db gslpub" /> 
<% // 接 收 客户 端 提交 的 数据 
String useraccount = request. getParameter("useraccount"); 
if (useraccount == null) useraccount = ""; 
ResultSet rs = null; 
try{ 

String strSQL = "SELECT UserAccount FROM useraccounts 

WHERE UserAccount = '" + useraccount + "'"; 
rs = gslpub. executeQuery( strSQL); 
if (rs.next()) 
out. println("< font color = 'red'> 抱 鞭 ! 账 户 " + useraccount + "已 经 被 注册 </font >"); 
else 
out. println("< font color = 'blue'> 祝 贺 您 ! 账 户 " + useraccount + "可 以 使 用 </font >"); 

catch (Exception ex){ 

out. print(ex. getMessage( ) ) ; 
} 
finally { 

gslpub. disconnectToDB( ); 
} 
%> 


在 上 述 服务 端 脚 本 程序 中 ,首先 读 取 客户 端 传递 的 参数 useraccount, 在 数据 库 中 查找 ， 
根据 查找 结果 输出 数据 。 该 输出 被 返回 到 客户 端 ,被 显示 在 客户 端 页 面 指定 的 id 区 域 。 


5.9 JavaScript 库 


在 JavaScript 客户 端 脚本 语言 出 现 后 ,在 JavaScript 中 ,虽然 提供 了 一 组 标准 的 内 置 对 
象 、. 浏 览 器 对 象 和 DOM 对 象 ,但 这 些 对 象 的 功能 有 限 , 许 多 功能 实现 依然 需要 大 量 的 用 户 


编码 。 在 JavaScript 语言 基础 上 ,一 大 批 JavaScript 编程 高 手 开 始 积极 地 研发 JavaScript 程 
序 库 ,以 扩展 JavaScript 的 功能 ,从 而 提高 开发 人 员 的 编程 效率 。 


5.9.1 库 与 框 杂 


2005 年 ,Web 开发 者 Sam Stephenson 开发 了 第 一 代 JavaScript 程序 库 Prototype. js， 
这 是 一 个 JavaScript 开发 基础 类 库 。 在 当时 浏览 器 创新 一 片 死 气 沉沉 的 景象 中 ,Prototype 
是 一 个 与 众 不 同 的 创意 : 我 们 能 否 通 过 扩充 JavaScript 的 内 置 类 型 .通过 增加 具有 新 功能 
的 类 型 来 弥补 JavaScript 的 固有 缺陷 ? 随后 这 种 思想 被 广泛 接受 ,在 许多 著名 的 网 站 出 现 
了 Prototype 的 身影 。 

然而 ,不 久之 后 ,人 们 看 到 ,Prototype 的 核心 思想 和 JavaScript 的 发 展 方向 是 不 一 致 
的 。 因 为 ,浏览 器 厂商 对 JavaScript 所 做 的 努力 是 增加 新 的 API, 其 中 很 多 与 Prototype 的 
实现 相 冲 突 。 此 时 ,程序 员 展 现 出 对 一 些小 的 、 自 我 实现 ,模块 化 的 脚本 库 的 偏爱 ,而 不 是 大 
型 的 框架 ,Prototype 表现 出 了 架构 上 的 缺陷 ,逐渐 淡出 舞台 。 

尽管 如 此 ,Prototype 曾 给 众多 程序 员 带 来 帮助 , 它 对 后 来 很 多 JavaScript 库 的 研发 产 
生 过 重大 影响 ,Prototype 对 前 端 技术 进步 做 出 的 贡献 不 可 磨灭 。 在 软件 的 世界 里 ,人 们 总 
是 在 尝试 新 的 思想 ,纠正 过 去 的 不 足 。 

2006 年 1 月 ,美国 人 John Resig 提议 改进 Prototype 的 "Behaviour” 库 ,他 在 Blog 上 发 
表 了 自己 的 想法 并 给 出 具体 的 例子 说 明 。 随 后 ,John Resig 在 纽约 barcamp 发 布 了 一 个 新 
的 JavaScript 程序 库 , 即 jQuery。 顾 名 思 义 ,jQuery 是 JavaScript 和 Query (查询 ) 的 意思 ， 
是 一 个 辅助 JavaScript 开发 的 程序 库 。 

2006 年 8 月 ,该 库 第 一 个 稳定 版 本 jQuery 1.0 发 布 ,具有 对 CSS 选择 符 、 事 件 处 理 和 
AJAX 交互 的 稳健 支持 。 随 后 jQuery 团队 再 接 再 厉 , 对 jQuery 进行 持续 的 优化 和 改进 , 先 
后 发 布 了 jQuery 1.0,jQuery 1.1,…,jQuery 1. 8,jQuery 2.0(2013 年 3 月 ),jQuery 2.1 
(2014 年 4 月 ) 到 jQuery3.0(2016 年 6 月 ) 一 系列 版 本 ,成 为 最 受 JavaScript 开发 人 员 欢 迎 
的 JavaScript 程序 库 。 

简单 地 讲 ,jQuery 是 一 个 JavaScript 框架 ,使 用 类 似 于 CSS 选择 器 ,可 以 快速 找到 文档 
中 的 HTML 元 素 , 并 对 其 进行 操作 ,如 隐藏 .显示 、 改 变样 式 、 添 加 内 容 等 。 能 够 方便 地 在 
页 面 上 添加 和 移 除 HTML 元 素 。 这 些 功 能 虽然 使 用 JavaScript 也 能 实现 ,但 是 jQuery 使 
这 些 工作 变 得 更 加 简单 。 


5.9.2 jQuery 基础 


和 传统 程序 设计 语言 的 函数 库 、 类 库 不 同 ,作为 JavaScript 脚本 语言 的 程序 库 ,jQuery 
是 以 源码 的 形式 提供 的 。jQuery 是 一 个 JavaScript 函数 库 ,保存 为 一 个 JavaScript 文件 ( 扩 
展 名 为 .js) ,其 中 包含 了 所 有 的 jQuery 函数 。 要 使 用 jQuery 库 函 数 . 需 要 下 载 相 应 的 JS 文 
件 保存 到 本 地 服务 器 直接 引用 ,也 可 以 从 多 个 公共 服务 器 CDN 中 引用 。 

1. 使 用 jQuery 库 

为 使 用 方便 ,通常 将 jQuery 库 下 载 并 保存 到 Web 服务 器 中 。 作 为 开源 软件 ,可 以 登录 
jQuery 官方 网 站 (http://jquery. com/) 免 费 下 载 ,包括 非 压缩 版 和 压缩 版 。 在 本 书 中 ,我 们 
下 载 的 是 压缩 的 开发 版 jquery-3. 1. 1. min. js。 虽 然 都 是 文本 文件 ,但 压缩 文件 经 过 了 特殊 
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处 理 , 虽 然 可 以 使 用 SublimeText 代码 编辑 器 打开 jquery. min. js 文件 ,但 很 难 阅读 。 
除了 将 jQuery 下 载 到 Web 服务 器 上 外 ,还 可 以 借助 内 容 分 发 网 络 (Content Delivery 
Network,CDN)9 来 使 用 jQuery 库 。 把 jQuery 存储 在 CDN 公共 库 上 可 加 快 网 站 载 人 速 
度 ,CDN 公共 库 是 指 将 常用 的 JS 库存 放 在 CDN 节点 ,以 方便 广大 开发 者 直接 调用 。 与 将 
JS 库存 放 在 服务 器 单机 上 相 比 ,CDN 公共 库 更 加 稳定 、 高 速 , 且 可 以 提供 最 新 版 本 。 为 
jQuery 提供 CDN 服务 的 包括 : Google、Microsof ,新 浪 云 计算 (SAE) .百度 云 (BAE) 等 。 
每 一 个 CDN ,都 提供 了 稳定 的 jQuery 包含 网 址 ,下 面 是 几 个 常用 的 CDN 网 址 : 
Google CDN 
< script type = "text/javascript" 


src= "http://ajax. googleapis. com/ajax/libs/jquery/2.1.0/jquery. min. js"> 
</script > 


Microsoft CDN: 


< script type = "text/javascript" 
src= "http://ajax. aspnetcdn. com/ajax/jQuery/jquery -2.1.0.min.js"> 
</script > 
新 浪 CDN: 
< script type = "text/javascript"src = "http://libs. baidu. com/jquery/2. 0. 3/jquery. min. js"> 
</script > 


百度 CDN: 


< script type = "text/javascript"src = "http://libs. baidu. com/jquery/2. 0. 3/jquery. min. js"> 
</script > 


为 保险 起 见 , 当 无 法 从 CDN 服务 器 上 获取 jQuery 时 , 则 使 用 本 地 jQuery, 需 要 在 网 页 
的 < head > 部 分 包含 jQuery 库 文件 。 一 般 形式 如 下 : 


< script type = "text/javascript" src="/jquery/jquery. min.js"></script > 


在 具体 引用 jQuery 的 代码 中 ,版 本 号 以 实际 安装 的 jQuery 库 文件 为 准 。 在 JS 文件 命 
名 中 ,一 般 使 用 减 号 (一 ) 表 示 语 义 中 的 空格 .使 用 点 (. ) 表 达 从 属 关 系 , 经 过 压缩 的 源 文件 通 
常 使 用 “min” 表 示 ,区别 于 原始 版 本 。 例 如 : jquery. min. js 表示 jQuery 库 压 缩 文件 。 所 谓 
JavaScript 压缩 文件 ,就 是 利用 专门 工具 ,将 文件 进行 去 宛 处 理 、 蔡 换 函 数 内 部 变量 等 操作 ， 
最 大 程度 减少 文件 长 度 。JavaScript 文件 压缩 后 ,JavaScript 解释 机 可 以 理解 ,但 用 户 将 不 
再 可 读 , 对 程序 起 到 一 定 的 保护 作用 ,这 是 保护 脚本 程序 的 一 种 常用 方法 。 

2. jQuery 的 组 成 

在 jQuery 库 文件 中 ,包含 了 大 量 的 库 函 数 ,可 以 将 jQuery 库 函 数 分 成 以 下 类 型 : 


@ 内容 分 发 网 络 CDN, 基 本 思路 是 尽 可 能 避 开 互联 网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 瓶颈 和 环节 ,使 内 容 
传输 得 更 快 ,更 稳定 。 通 过 在 网 络 各 处 放置 节点 服务 器 所 构成 的 在 现 有 的 互联 网 基础 之 上 的 一 层 智能 虚拟 网 络 。CDN 
系统 能 够 实时 地 根据 网 络 流量 和 各 节点 的 连接 、 负 载 状 况 以 及 到 用 户 的 距离 和 响应 时 间 等 综合 信息 将 用 户 的 请 求 重新 
导向 离 用 户 最 近 的 服务 节点 上 。 其 目的 是 使 用 户 可 就 近 取得 所 需 内 容 , 解 决 Internet 网 络 拥挤 的 状况 ,提高 用 户 访问 网 
站 的 响应 速度 。 


(1) HTML 元 素 选 取 ; 

(2) HTML 元 素 操 作 ; 

(3) DOM 遍历 和 修改 ; 

(4) CSS 操作 ; 

(5) HTML 事件 函数 ; 

(6) JavaScript 特效 和 动画 ; 

(7) AJAX:; 

(8) Utilities。 

在 Web 前端 开发 中 ,与 传统 的 JavaScript 原始 编码 相 比 ,使 用 jQuery 库 更 加 简便 高 
效 , 且 jQuery 兼容 多 种 浏览 器 ,jQuery 编程 的 优势 主要 体现 在 以 下 4 个 方面 : DHTML 文 
档 遍 历 操作 ; @ 事 件 处 理 ; @ 动 画 ; @AJAX 互 操作 。 本 质 上 讲 ,jQuery 也 是 JavaScript, 只 
是 把 前 端 开发 中 大 量 的 公共 功能 进行 了 封装 ,构成 了 一 个 JavaScript 开发 框架 。 


5.9.3 jQuery 函数 


“ 写 得 更 少 ,做 得 更 多 ”是 jQuery 的 基本 出 发 点 。 这 一 思想 是 通过 丰富 的 jQuery 函数 
库 实现 的 。 本 质 上 讲 ,jQuery 函数 也 是 用 JavaScript 程序 写成 的 。 但 是 ,jQuery 为 简化 用 
户 编码 ,对 HTML 文档 的 常用 操作 进行 了 抽象 和 封装 ,写成 了 一 组 可 供用 户 直接 调用 的 
函数 。 

1. 元 素 选 择 器 

在 JavaScript 中 ,选取 元 素 通 常 通过 document 对 象 成 员 函 数 和 成 员 变 量 来 实现 ,例如 
document. getElementByID() .getElementsByName() 和 getElementsByTagName() 函 数 可 
以 返回 指定 的 文档 对 象 。 也 可 以 通过 document 对 象 的 all ,images \links .forms 等 数组 成 员 
变量 返回 相应 的 文档 对 象 。 这 种 获得 HTML 元 素 对 象 的 代码 可 读 性 强 , 但 书写 比较 麻烦 。 

在 jQuery 中 ,选取 HTML 元 素 , 是 通过 jQuery 选择 器 完成 的 。jQuery 选择 器 包括 元 
素 选 择 器 和 属性 选择 器 ,可 通过 标签 名 、 属 性 名 或 内 容 对 HTML 元 素 进行 选择 ,可 以 选择 
一 个 元 素 , 也 可 以 选取 一 个 元 素数 组 。 一 般 形 式 是 : 


$ (selector) 


其 中 ,符号 $ 表示 jQuery, 选择 符 (selector) 用 于 “查询 ”和 “查找 ”要 返回 的 HTML 元 
素 ,返回 的 元 素 可 能 是 一 个 ,也 可 能 是 多 个 。 

(1) 使 用 CSS 选择 器 选取 HTML 元 素 , 例 如 : $("p"”) 选 取 所 有 < p > 元 素 , $("p. 
note") 选 取 所 有 class 王 "note" 的 < p > 元素, $ ("p# help") 选 取 id 一 "help" 的 第 一 个 < p > 
元 素 。 

(2) 使 用 XPath 表达 式 选 择 带 有 给 定 属 性 的 元 素 , 例 如 : $("[href]") 选 取 所 有 带 有 
href 属性 的 元 素 , $("[href 二 '# ']") 选 取 所 有 带 有 href 值 等 于 "#" 的 元 素 。$ ("[href! 一 
'#']") 选 取 所 有 带 有 href 值 不 等 于 "# "的 元 素 。$("[Lhref$ = 二"'.jpg'j") 选 取 所 有 href 值 
以 ".jpg" 结 尾 的 元 素 。 

当选 择 了 一 个 或 多 个 DOM 对 象 后 ,可 以 对 选取 的 对 象 进行 操作 ,例如 : 

$("p").hide(): 隐藏 所 有 段落 。 
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$ ("p. test"). hide() : 隐藏 所 有 class 二 "test" 的 段落 。 

$("#test"). hide(): 隐藏 所 有 id 二 "test" 的 元 素 。 
$("p").css("background-color","gray"): 设置 所 有 p 元素 的 CSS 属性 值 。 
2. 元 素 操 作 函 数 
对 于 选取 的 HTML 元 素 , 可 以 对 元 素 内 容 和 属性 进行 设置 ,jQuery 提供 的 元 素 内 容 和 





属性 操作 函数 见 表 5-30。 


表 5-30 jQuery 元 素 操作 函数 


函 数 名 


功 能 





$ (selector). html(content) 


设置 被 选 元 素 的 innerHTML 值 





$ (selector). append(content) 


在 被 选 元 素 的 内 部 innerHTML 追加 内 容 





$ (selector). prepend( content) 


预 置 被 选 元 素 的 内 部 innerHTML 内 容 





$ (selector). after( content) 


在 被 选 元 素 之 后 添加 HTML 内 容 





$ (selector). before( content) 


在 被 选 元 素 之 前 添加 HTML 内 容 

















$ (selector). css(name, value) 为 匹配 元 素 设置 样式 属性 的 值 

$ (selector). css( {properties}) 为 匹配 元 素 设置 多 个 样式 属性 

$ (selector). css(name) 获得 第 一 个 匹配 元 素 的 样式 属性 值 
$ (selector). height(value) 设置 匹配 元 素 的 高 度 

$ (selector). width(value) 设置 匹配 元 素 的 宽度 





例如 : $ ("p").css({"background-color":"red","font-size":"200%")); 设 置 所 有 p 段 
落 的 背景 色 和 字体 大 小 。$ (this). css("font-size"); 返 回 当 前 元 素 的 font-size 属性 值 。 

3. 效果 函数 

关于 HTML 中 元 素 的 隐藏 .显示 、 切 换 、 滑 动 以 及 自 定义 动画 等 效果 ,jQuery 提供 的 效 
果 函 数 见 表 5-31。 














表 5-31 jQuery 效果 函数 
函 数 名 功 能 
$ (selector). hide(speed ,callback) 隐藏 被 选 元 素 
$ (selector). show(speed ,callback) 显示 被 选 元 素 
$ (selector). toggle( speed ,callback) 切换 (在 隐藏 与 显示 之 间 ) 被 选 元 素 
$ (selector). slideDown(speed ,callback) 向 下 滑动 (显示 ) 被 选 元 素 





$ (selector). 


slideUp(speed, callback) 


向 上 滑动 (隐藏 ) 被 选 元 素 





$ (selector). 


slideToggle( speed ,callback) 


对 被 选 元 素 切换 向 上 滑动 和 向 下 滑动 

















$ (selector). fadeIn(speed,callback) 淡 入 被 选 元 素 

$ (selector). fadeOut(speed ,callback) 淡出 被 选 元 素 

$ (selector). fadeToCspeed ,callback) 把 被 选 元 素 淡 出 为 给 定 的 不 透明 度 
$ (selector). animate() 对 被 选 元 素 执行 自 定义 动画 


在 jQuery 效果 函数 中 ,参数 speed 是 可 选 参数 ,规定 显示 或 隐藏 的 速度 , 取 值 包括 


"slow"、 


"fast" 、"normal" 或 毫秒 。callback 是 可 选 参数 ,设置 在 动画 函数 100%% 完 成 之 后 被 


执行 的 函数 名 称 。 由 于 JavaScript 语句 是 逐一 执行 的 ,可 能 会 出 现 这 样 的 情况 ,在 动画 还 没 
有 完成 前 ,就 开始 执行 动画 后 面 的 语句 ,这 就 可 能 会 产生 错误 或 页 面 冲突 。 为 了 避免 这 个 情 


况 , 可 以 参数 的 形式 添加 Callback 函数 。 当 动画 100% 完 成 后 , 即 调用 Callback 函数 。 
例如 : 


$ ("p").hide(1000); 
alert("The paragraph is now hidden"); 


上 面 的 代码 是 错误 的 ,因为 元 素 隐藏 需要 的 时 间 是 1000ms, 在 元 素 隐 藏 完成 前 ,就 会 执 
行 到 下 面 的 提示 语句 ,这 是 不 正确 的 。 遇 到 此 种 情况 ,可 以 增加 callback 函数 : 


$ ("p").hide(1000,function(){ 
alert("The paragraph is now hidden"); 
}); 


自 定义 动画 函数 animate 有 4 个 参数 : 

params, 必 选 参数 ,定义 产生 动画 的 CSS 样式 表 , 可 以 同时 设置 多 个 此 类 属性 。 

duration, 可 选 参 数 , 定 义 用 来 应 用 到 动画 的 时 间 , 取 值 是 "slow"、"fast"、"normal" 或 
毫秒 。 

4. 事件 处 理 函 数 

在 HTML 中 ,我 们 知道 标记 属性 包括 一 般 属性 和 事件 属性 ,事件 处 理 函 数 就 是 指 发 生 
某 些 事件 时 所 调用 的 方法 , 即 对 应 标记 的 事件 属性 。 

在 jQuery 中 ,事件 处 理 函 数 通常 写 到 文档 头 部 ,例如 : 


< html > 
<head > 
< script type = "text/javascript" src= "jquery/jquery. min.js"></script > 
< script type = "text/javascript"> 
$ (document). ready(function(){ 

$ ("button" ) .click(function(){ 

$ ("p").hide(); 

}D); 
这 
</script > 
</head> 
<body> 
<hl > Heading </hl > 
<p>Paragraphl </p> 
<p>Paragraph?2 </p> 
<button > Click Here </button > 
</body > 
</html > 


在 上 面 的 例子 中 ,定义 了 < button > 元 素 的 click 事件 处 理 函 数 ,函数 定义 如 下 : 

$ ("button").click(function() { 

$ ("p") .hide(); // 函 数 代码 部 分 

}); 
当 单 击 相应 按钮 时 ,事件 被 触发 ,调用 该 函数 ,该 方法 隐藏 所 有 < p > 元 素 。 除 了 鼠标 单 

击 事件 外 ,常用 的 事件 函数 还 有 dblclick( 鼠 标 双 击 ) focus( 获 得 输入 焦点 ) .mouseover( 鼠 

标 悬 停 ) 等 。 
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在 上 面 的 例子 中 ,我 们 定义 的 所 有 jQuery 函数 都 包含 在 一 个 document. ready( 文 档 就 
绪 函 数 ) 函数 中 ,形式 如 下 : 


$ (document) .ready(function(){ 


--- jQuery functions go here —--—— 
1); 
这 是 为 了 防止 文档 在 完全 加 载 (就 绪 ) 之 前 运行 jQuery 代码 。 如 果 在 文档 没有 完全 加 


载 之 前 就 运行 函数 ,操作 可 能 失败 。 例 如 : 试图 隐藏 一 个 不 存在 的 元 素 ,获得 未 完全 加 载 的 
图 像 的 大 小 等 。 


在 Web 页 面 较 多 时 ,我 们 可 以 将 那些 公共 的 jQuery 函数 保存 为 一 个 单独 的 . js 文件 ， 
把 这 些 文件 保存 在 一 个 单独 的 文件 夹 中 。 在 需要 的 网 页 中 ,包含 相应 的 .js 文件 ,例如 : 


< script type = "text/javascript" src= "pubjs/treemenudata. js"></script > 


使 用 单独 的 .js 文件 ,需要 注意 的 是 一 定 要 避免 不 同文 件 中 ,函数 等 名 称 的 冲突 问题 。 
5. AJAX 函数 


jQuery 提供 了 用 于 AJAX 开发 的 丰富 函数 (方法 ) 库 , 见 表 5-32。 


表 5-32 AJAX Request 函数 























函 数 名 功 能 

$ .ajax(options) 把 远程 数据 加 载 到 XMLHttpRequest 对 象 中 
$ (selector). load(url[ ,data J[ ,callback]) 把 远程 HTML 数据 加 载 到 被 选 的 元 素 中 
$. getCurlL ,data][ ,callback J[ ,type]) 使 用 HTTP GET 加 载 远 程 数据 
$ .post(url, data,callback, type) 使 用 HTTP POST 加 载 远 程 数 据 
$. getJSON(url, data,callback) 使 用 HTTP GET 加 载 远 程 JSON 数据 
$. getScript(url, callback) 加 载 并 执行 远程 的 JavaScript 文件 

函数 参数 说 明 如 下 : 


。 boptions ,完整 AJAX 请 求 的 所 有 的 参数 项 ,包括 url、type、async、 contentType、 
data dataType、beforeSend、complete error、success。 其 中 ,anysc 参数 默认 值 为 
true, 默 认 设置 下 ,所 有 请 求 均 为 异步 请 求 , 如 果 需 要 发 送 同步 请 求 ,将 此 选项 设置 
为 false。 同 步 请 求 将 锁 住 浏览 器 ,用户 其 他 操作 必须 等 待 请 求 完成 才 可 以 执行 。 
参数 beforeSend、complete、error、success 均 为 函数 参数 .代表 发 送 请 求 前 、 完 成 后 、 失 
败 和 成 功 下 调用 的 函数 ,complete 函数 不 管 是 失败 和 成 功 均 调用 。success 函数 有 两 个 参 
数 ,一 个 为 由 服务 器 返回 ,并 根据 dataType 参数 进行 处 理 后 的 数据 ,一 个 为 描述 状态 的 字符 
串 ,该 参数 可 选 。 
。 burl ,被 加 载 的 数据 的 URL 地 址 。 
。 bdata ,发送 到 服务 器 的 数据 的 键 / 值 对 象 。 
。 bcallback, 回 调 函 数 , 当 数 据 被 加 载 时 ,所 执行 的 函数 .例如 $ ("# showget"). html 
(req) ; ,在 特定 的 位 置 显示 服务 端 返回 的 数据 。 
。 btype, 被 返回 的 数据 的 类 型 , 取 值 为 html、xml\json、jasonp、script、text。 
下 面 是 一 个 典型 的 AJAX 郴 数 : 





$ ('# login').click(function( ){ 
$ .ajax({ 
type:"GET", 
url:"login. jsp", 
data: {useraccount: $ ("#useraccount").val(),pwd: $ ("#pwd").val()}, 


success:function(rtndata){ 
$ ('#resText'). empty(); 
$ ('#resText'). html(rtndata); 


}); 
D); 
最 后 需要 说 明 的 是 ,由 于 本 书 篇 幅 所 限 , 不 能 全 面 介绍 jQuery 函数 库 ,对 jQuery 中 更 
多 的 jQuery 函数 jQuery 事件 jQuery 效果 jQuery 文档 方法 .jQuery 遍历 函数 ,jQuery 数 
据 操作 函数 等 ,请 读者 查阅 jQuery 相关 参考 手册 。 


5.9.4 jQuery 插件 


在 jQuery 中 ,不 仅 有 丰富 的 jQuery 函数 ,同时 还 有 许多 成 熟 的 插件 可 供 选择 。 所 谓 
jQuery 插件 ,可 以 简单 地 理解 为 具有 特定 功能 和 用 途 的 jQuery 功能 模块 , 它 是 jQuery 函数 
的 延伸 ,利用 jQuery 而 编写 的 一 个 功能 模块 。 每 个 插件 保存 为 一 个 独立 的 .js 文件 ,在 网 页 
中 使 用 插件 ,必须 要 包含 该 文件 。 

在 jQuery 之 上 ,Web 开发 人 员 研 发 了 数量 众多 的 jQuery 插件 ,这 些 插件 数量 众多 , 按 
照 功 能 分 类 ,常用 的 插件 如 下 。 

(1) 菜单 类 插件 : 水 平 菜单 ,垂直 菜单 , 树 状 菜单 ,下 拉 菜 单 ,右键 菜单 。 

(2) 日 期 时 间 插 件 : 用 于 输入 日 期 和 时 间 ,插件 很 多 ,根据 需要 选用 。 

(3) 表单 验证 插件 。 

(4) 数据 组 织 插件 : 列表 插件 ,表格 排序 插件 ,网 格 插件 ,电子 表格 插件 等 。 

(5) 图 形 绘制 插件 。 

(6) 图 片 插件 : 图 片 裁剪 插件 ,图 片上 传 插件 。 

(7) 地 图 插件 。 

(8) 文件 上 传 插件 ,文件 下 载 插件 。 

(9) 进度 条 插件 ,星际 评定 插件 等 。 

除了 使 用 他 人 的 jQuery 插件 外 ,我 们 也 可 以 开发 自己 的 jQuery 插件 。jQuery 插件 开 
发 有 两 种 方式 : 一 种 是 类 扩展 的 方式 开发 插件 ,为 jQuery 添加 新 的 全 局 函数 (jQuery 的 全 
局 函数 是 属于 jQuery 命名 空间 的 函数 ), 如 果 将 jQuery 看 成 一 个 类 ,那么 就 相当 于 给 
jQuery 类 本 身 添加 方法 。 例 如 : 

$ .ltrim = function( str ) { 

return str. replace( /*\s+/, "" ); 

}; 

第 二 种 方式 是 对 象 扩 展 的 方式 开发 插件 , 即 为 jQuery 对 象 添加 方法 。 

在 网 页 中 使 用 jQuery 插件 ,就 是 将 插件 文件 包含 到 网 页 中 。 使 用 jQuery 插件 ,不 需要 
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编写 大 量 的 JavaScript 代码 ,不 仅 减 少 了 编程 的 工作 量 ,同时 还 可 以 做 到 界面 美观 。 


5.9.5 举例 


使 用 jQuery 库 ,与 传统 的 JavaScript 编程 相 比 ,风格 上 有 所 变化 ,有 些 程序 的 可 读 性 不 
如 传统 的 JavaScript 编码 。 但 丰富 的 jQuery 函数 库 , 可 以 显著 提高 编程 效率 ,因此 ,在 前 端 
开发 中 ,应 该 加 强 jQuery 的 使 用 。 

下 面 是 一 个 现代 风格 的 表格 UI 设计 ,要 求 表格 隔行 显示 不 同 的 背景 色 , 表 头 为 特定 颜 


色 。 在 功能 实现 时 ,采用 了 jQuery 郴 数 定义 风格 ,代码 如 下 : 


<!DOCTYPE html > 

<html> 

<head> 

<meta charset = "UTF — 8"> 

< style type = "text/css"> 

.Content ~ table{ 
width:100 %; 


border - collapse:collapse; 


empty — cells: show; 
font — size:17px; 
text ~ align: center; 

} 

, content ~ table tr{ 
height:35px; 

} 

.content ~ table th{ 
padding:. 5em; 


border: 1px solid # fff; 


background: #3992d0; 
color: #fff; 

} 

.Content ~ table td{ 


border: 1px solid #fff; 


} 


.content - table tr. even td{ 


background: # eS5f1f4; 
} 


. content 一 table tr. odd td{ 


background: # f8fbfc; 
} 
</style> 


/* 合并 边框 间隙 * / 
/* 显示 内 容 为 空 的 单元 格 x / 


/* 设置 行 高 */ 


/* 表 头 单元 格 * / 


/x 文本 颜色 x/ 


/* 单 元 格 * / 


/* 表格 颜色 隔行 显示 * / 
/x* 深 色 */ 


/x* 浅 色 */ 


< script src = "jquery/jquery. min. js"></script > 


< script type = "text/javascript"> 
this. tablestyle = function(tableobj){ 


var css = "odd"; 


var tr = tableobj. getElementsByTagName("tr"); 


for (var i=0;i<tr. length;i++){ 
css = (css == "odd") ? "even" : 


tr[i].className 


"odd"; 


}; 
}; 
this. tablecloth = function(){ 
var tables = document. getElementsByTagName("table"); 
for (var i= 0;i<tables. length;i++){ 
tablestyle( tables[i]); 
}; 
}; 
window. onload = tablecloth; 
</script > 
</head > 
<body> 
<table class = "content - table"> 
<tr> 
<th width= "30% "> 学 号 </th> 
<th> 姓 名 </th> 
</tr> 
去 二 
<td> 2016100001 </td> 
<td> 王 一 平 </td> 
</tr> 
<tr> 
<td> 2016110001 </td> 
<td> 后 颖 </td> 
</tr> 
<tr> 
<td> 2016110002 </td> 
<td> 欧 阳 天 雨 </td> 
</tr> 
</table> 
</body > 
</html > 


在 IE、Google Chrome 浏览 器 中 打开 网 页 .显示 如 图 5-17 所 示 。 


一 TE 


‘ 3 © [file///F/haosite/tablecss.html 
学 号 姓名 
2016100001 一 于 
2016110001 


2016110002 


图 5-17 表格 的 隔行 背景 设置 








在 上 述 代码 中 ,我 们 使 用 了 HTML 5 的 UTF-8 字符 集 。 在 实际 开发 中 ,因为 网 页 制作 
工具 的 不 同 ,有 的 网 页 采用 的 是 GB2312 字符 集 , 有 时 候 简单 地 修改 网 页 文件 中 的 字符 集 编 
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码 , 保 存 网 页 后 ,用 代码 编辑 工具 打开 网 页 .或 者 在 浏览 器 中 打开 网 页 时 可 能 会 显示 乱码 。 
在 网 页 中 显示 乱码 或 在 文本 编辑 器 中 显示 乱码 ,本 质 上 都 是 文件 存储 的 字符 编码 和 显 
示 设 置 的 字符 编码 不 一 致 造成 的 。 此 时 ,可 以 修改 网 页 中 的 显示 字符 编码 设置 ,使 其 和 网 页 
文件 存储 的 字符 编码 一 致 ,文件 存储 字符 编码 是 由 网 页 编辑 工具 确定 的 。 或 者 ,将 页 面 内 容 
复制 到 Windows 记事 本 程序 中 ,修改 记事 本 文件 存储 编码 ,使 其 和 网 页 显示 设置 一 致 。 


5.10 综合 举例 


Web 客户 端的 编程 比较 简单 . 它 不 需要 特别 的 编译 和 运行 环境 ,只 要 有 一 个 浏览 器 就 
可 以 了 。 但 是 ,要 编写 高 质量 的 客户 端 脚本 ,并 不 容易 ,这 需要 大 量 的 实践 经 验 ,也 来 源 于 用 
户 的 需求 。 没 有 需求 ,就 不 会 有 深入 的 编程 体验 ,更 无 法 把 一 个 工具 学 精 。 为 此 ,在 本 章 的 
最 后 ,我 们 给 出 三 个 在 实际 Web 开发 中 常用 的 功能 ,分 别 来 综合 说 明 JavaScript 中 的 窗口 
控制 .图 层 技 术 和 HTML DOM 文档 操作 ,帮助 建立 总 体 的 Web 客户 端 编程 思想 。 也 相信 
这 三 个 应 用 的 代码 ,对 用 户 会 有 很 好 的 借鉴 作用 。 


5.10.1 创建 折 缀 式 莱 单 


在 许多 网 页 上 ,都 有 折 受 式 菜单 ,这 类 菜单 的 创建 可 以 利用 HTML DOM, 通 过 纯 
JavaScript 程序 编码 实现 。 目 前 常用 的 菜单 有 折 释 式 和 树 状 目录 结构 两 种 形式 。 本 小 节 介 
绍 折 释 式 菜单 的 创建 和 应 用 。 

设 有 一 个 框架 页 面 ,分 为 左右 两 个 frame, 左 侧 显示 一 个 折 释 菜单 , 右 侧 是 菜单 项 所 对 
应 的 页 面 显示 区 域 , 右 侧 帧 名 为 mainFrame。 左 侧 菜单 页 面 代 码 如 下 : 

折 释 菜单 mainmenu. htm 代码 清单 : 


<!DOCTYPE html > 

<html > 

<head> 

<meta charset = "utf 一 8"> 

<style type = "text/css"> 

a {font - size:17px;text - decoration:none} 

a:link{color: #0000FF;} 

a:visited{color: #0000FF;} 

a:hover {color: #FF0000;font ~ weight:bold;} 

a:active {color: # 0000FF;} 

. menutitle { 
width:150px; height:30; 
border: 1px solid #204848; 
font — size:17px; 
color:rgb(254,254, 166); 
background - color:rgb(0,119,166); 
text ~ align:center; 
cursor:pointer; 

} 

</style> 

<script> 

function SwitchMenu( submenu) 


{ 


for (var i= 0;i<menutable. rows. length; i++) 





if (menutable. rows[i]. getAttribute("submenu") == submenu) 
. 
if (menutable. rows[ i]. style. display == "" || menutable. rows[ i]. style.display ==" 
block") 
menutable. rows[ i]. style. display = "none"; 
else 
menutable. rows[ i]. style. display = "block"; 
. 
i 
} 
</script > 
</head> 
<body> 
< table id= "menutable" border = "0" bgcolor = " 井 CCCCCC"> 
<tr> 
<td class = "menutitle" onclick = "SwitchMenu( 'sub01')"> 课 程 简介 </td> 
</tr> 


<tr submenu = "sub01"> 

<td><a href = "kcjj/kcjj. htm"” target = "contentframe"> 教 学 日 标 </a></td> 
</tr> 
<tr submenu = "sub01"> 

<td><a href = "kcjj/kcdg. htm" target = "contentframe"> 教 学 大 纲 </a></td> 
</tr> 
<tr> 

<td class = "menutitle" onclick = "SwitchMenu( 'sub02')"> 教 学 队伍 </td> 
</tr> 
<tr submenu = "sub02"> 

<td><a href = "jxdw/hao. htm" target = "contentframe"> 课 程 负 责 人 </a></td> 
</tr> 
<tr submenu = "sub02"> 

<td><a href = "jxdw/jxtd. htm" target = "contentframe"> 教 学 团队 </a></td> 
</tr> 
</table> 
</body > 
</html > 


对 于 上 述 代 码 ,分 别 在 I 浏览 器 和 GoogleChrome 浏览 器 中 打开 ,显示 创建 的 折 释 菜 
单 结果 ,如 图 5-18 所 示 。 


DD) exa5- mainmenu html x 


和 3 © BD filey///F/haosite/exa5-17mainmenu.htrr? 


EECLEETS | 
教学 目标 
教学 大 网 





图 5-18 折 又 式 菜单 示例 
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当 用 户 在 一 级 菜单 上 单 击 时 ,将 打开 对 应 的 二 级 菜单 。 二 级 菜单 对 应 具体 的 超 链 接 , 当 
用 户 鼠 标 指向 二 级 菜单 项 目 时 ,在 浏览 器 状态 栏 ,可 以 看 到 对 应 的 超 链 接 。 实 现 上 述 功 能 的 
代码 很 多 ,在 本 处 给 出 的 代码 中 ,采用 表格 布局 比 div 更 加 简单 。 其 次 ,对 菜单 分 组 ,在 < tr > 
标记 中 添加 了 一 个 自 定义 属性 submenu, 来 实现 菜单 分 组 。 

如 果 要 增加 三 级 菜单 ,可 以 对 菜单 编码 进行 规划 ,如 subxxyyzz, 每 级 对 应 两 位 数字 ,如 
果 是 菜单 标题 ,相应 的 子 菜单 部 分 别 为 00。 例 如 , sub010000 代表 第 一 组 菜单 标题 ， 
sub010100 代表 二 级 菜单 sub0101 的 标题 ,只 有 zz 不 为 00 的 才 是 具体 的 菜单 命令 。 通 过 字 
符 串 函数 substring 可 以 控制 一 级 \ 二 级 菜单 的 折 钱 和 打开 。 

现在 许多 网 站 采用 一 级 菜单 水 平 布 局 ,二 级 菜单 采用 下 拉 式 ,如 何 实现 呢 ? 利用 表格 、 
自 定义 标记 属性 以 及 CSS 技术 ,也 可 以 很 灵活 地 进行 控制 。 通 过 动态 地 设置 元 素 
className 属性 为 不 同 的 CSS 样式 类 ,可 以 实现 当 鼠 标 移动 到 某 菜单 标题 时 ,对 菜单 标题 高 
亮 显示 等 效果 。 对 于 菜单 命令 项 , 则 通过 定义 < a > 标记 不 同 状态 的 CSS 样式 实现 显示 效果 
控制 。 


5.10.2 创建 树 状 菜单 


属性 菜单 也 是 Web 开发 中 常用 的 菜单 , 下 面 我 们 通过 图 层 的 方式 来 演示 树 状 菜单 的 创 
建 ,菜单 分 为 二 级 和 三 级 菜单 。 要 实现 的 显示 界面 如 图 5-19 所 示 。 名 @& 新 闻 公 告 管理 





对 应 上 述 树 状 菜单 的 menutree. htm 代码 清单 如 下 : | 白 馈 内 容 管理 
| 新 闻 公告 列表 
<!DOCTYPE html > | 新 建 公告 
<html> 修改 删除 
<head > | 四 时 内 容 昨 核 
<meta charset = "utf — 8"> 日 全 系统 用 户 管理 
< style type= "text/css"> | 和 白 司 用 户 组 管理 
a {font ~ size:14px; text - decoration:none} | 自生 用 户 账号 管理 
a:link{color: # 0000FF;} 日 筷 功能 模块 管理 
a:visited{color: # 0000FF;} 功能 模块 列表 
a:hover {color: #FF0000;font — weight:bold;} 添加 修改 删除 
a:active {color: #0000FF;} 权限 授权 审核 
img{vertical ~ align:middle;} 自 司 论坛 管理 
全 = size:17pxioolor: 井 700000; font - weight :bold;} 图 5-19 树 状 菜单 
. menutitle2{font — size:17px;color: #005000;} 
</style> 
<script> 


L71771711111111111111711111111111111111111111111111111111111111111111111111111111111/ 
// 一 级 菜单 和 二 级 菜单 的 打开 和 折叠 
function switchmenu( submenu) 
{ 
var len = submenu. length; 
for (var i= 0;i<menutable.rows.length; i++ ) 
{ 
menuitem = menutable. rows[ i]. getAttribute("menuitem" ); 
// 一 级 菜单 标题 
if (menuitem== submenu+ "0000") continue; 
// 二 级 菜单 标题 


if (menuitem == submenu+ "00") continue; 


// 包 含 的 子 菜单 及 菜单 命令 
if (menuitem. substring(0, len) == submenu) 











{ 
if (menutable. rows[ i]. style. display == "" | | menutable. rows[ i]. style.display== "block") 
menutable. rows[i].style.display= "none"; 
else 
menutable.rows[i]. style. display = "block"; 
} 
} 
} 
</script > 
</head > 
<body style = "overflow — x:hidden;"> 
<table id= "menutable" border = "0" bgcolor = " 井 CCCCCC"> 


<tr menuitem= "menuroot"> 
<td style= 'cursor:pointer;'> 





< img src = 'images/applogo. gif '> 
< span > 组 织 机 构 与 人 员 岗 位 配置 管理 </span > 
</td> 
</tr> 


<tr menuitem= "Menu010000" onclick = "switchmenu( 'Menu01');"> 
<td style= 'cursor:pointer;'> 
< img id= 'img01a' src = 'images/menuplus. gif'> 
< img id= 'img01b' src = 'images/folderclose. gif'> 
< span class = 'menutitlel'> 用 户 账户 管理 </span > 
</td> 
</tr> 
<tr menuitem= "Menu010101" style = "display:none"> 
<td> 
< img src = 'images/menuline. gif'> 
< img src= 'images/menulineminus. gif'> 
<span><a href = "modules - admin. jsp”target = "mainFrame"> 用 户 账 户 列表 </a></span> 
</td> 
</tr> 
<tr menuitem = "Menu010102" style = "display:none"> 
<td> 
< img src = 'images/menuline. gif'> 
< img src = 'images/menulineminus.gif'> 
< span><a href = 'modules - admin. jsp' target = "mainFrame"> 添 加 修改 删除 </a></span> 
</td> 
</tr> 
<tr menuitem= "Menu010103" style= "display:none"> 
<td> 
< img src = 'images/menuline. gif'> 
< img src = 'images/menulineminus.gif'> 
< span><a href = 'modules - admin. jsp' target = "mainFrame"> 导 入 导出 </a></span> 
</td> 
</tr> 
<tr menuitem= "Menu010200" style = "display:none" onclick = "switchmenu( 'Menu0102') ; "> 
<td style= 'cursor:pointer; "> 





< img src = 'images/menuline. gif'> 
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< img id= 'img0102a' src = 'images/menuplus. gif'> 
< img id= 'img0102b' src = 'images/folderclose. gif'> 
< span class = 'menutitle2'> 查 询 统计 </span> 
</td> 
</tr> 
<tr menuitem = "Menu020000" onclick = "switchmenu( 'Menu02');"> 
<td style= 'cursor:pointer; "> 
< img id= 'img02a' src = 'images/menuplus. gif'> 
< img id= 'img02b' src = 'images/folderclose.gif'> 
< span class = 'menutitlel > 角色 权限 管理 </span > 
</td> 
</tr> 
<tr menuitem = "Menu020100" style= "display:none" onclick = "switchmenu( 'Menu0201') ;"> 
<td style= 'cursor:pointer;'> 
< img src = 'images/menuline. gif'> 
< img id= 'img0201a' src = 'images/menuplus. gif'> 
< img id= 'img0201b' src = 'images/folderclose. gif'> 
< span class = 'menutitle2'> 系 统 功 能 管理 </span> 
</td> 
</tr> 
<tr menuitem = "Menu020101" style = "display:none"> 
<td> 
< img src = 'images/line.gif'> 
< img src = 'images/line. gif '> 
< img src = 'images/line. gif'> 
< span ><a href = 'modules - admin. jsp' target = "mainFrame"> 功 能 列表 </a></span> 
</td> 
</tr> 
</table> 
</body > 
</html > 


树 状 菜单 的 实现 方法 很 多 ,使 用 表格 组 织 , 其 结构 更 容易 理解 ,容易 添加 和 删除 。 在 表 
格 设计 的 树 状 菜单 中 ,一 级 、 二 级 、 三 级 菜单 项 都 对 应 表格 的 一 行 ,每 一 行 可 以 设置 一 个 单元 
格 ,分 别 显示 树 状 节点 图 片 和 文字 。 菜 单 的 打开 和 折 释 .本质 上 就 是 表格 行 的 显示 和 隐藏 控 
制 。 只 要 为 每 一 行 设计 科学 的 编码 , 行 的 隐藏 和 显示 就 很 容易 实现 。 

在 一 个 单元 格 内 ,如 果 包 含 文字 和 图 片 ,需要 控制 文字 和 图 片 在 单元 格 内 垂直 居中 ,有 
两 种 方法 : 第 一 ,在 <img > 中 设置 标记 属性 align 一 absmiddle。 第 二 ,如 果 < img > 很 多 , 定 
义 img 选择 器 , 即 img{ vertical-align:middle; } 。 

通过 上 述 代码 ,可 以 看 出 树 状 菜 单 的 代码 有 很 强 的 规律 性 ,由 于 结构 相似 ,可 以 编写 菜 
单 创建 程序 ,通过 定义 菜单 数据 结构 ,自动 生成 上 述 代 码 。 


5.10.3 数据 有 效 性 验证 


在 Web 开发 中 ,表单 作为 客户 端 输入 数据 的 用 户 界面 ,为 了 保证 数据 输入 的 有 效 性 ,在 
提交 表单 以 前 ,往往 需要 在 客户 端 进行 数据 的 有 效 性 检查 ,这 样 可 以 有 效 地 减少 服务 器 的 负 
载 , 提 高 整个 Web 系统 的 运行 效率 。 


1. 表单 的 提交 
在 HTML 中 ,表单 提交 有 以 下 两 种 方法 : 


(1) 通过 < form > 的 onsubmit 事件 属性 ,编写 相应 的 表单 输入 处 理 函数 。 如 果 函 数 返 
回 true, 则 表单 提交 ,返回 false, 则 表单 不 提交 。 使 用 该 方法 .表单 中 需要 包含 “提交 ”按钮 ， 


即 type 王 "submit" 的 按钮 。 


(2) 通过 普通 按钮 或 超 链接 ,通过 定义 onclick 事件 属性 ,提交 表单 。 此 时 ,对 应 的 事件 
函数 定义 中 ,可 分 成 两 部 分 ,前 面 是 有 效 性 验证 ,然后 通过 Form 对 象 的 submit() 方 法 提交 ， 


即 表单 名 . submit()。 该 种 方法 和 第 一 种 方法 相 比 ,其 程序 可 读 性 更 好 。 


在 传统 程序 中 ,通常 会 定义 一 些 快捷 键 ,也 可 以 对 表单 提交 定义 快捷 键 ,方法 如 下 : 


(1) 首先 定义 键盘 操作 处 理 函数 


function doByKey() 
. 
if ( window. event. keyCode == 113) //F2, 提 交 表单 
forml submit(); 
if (window. event. keyCode == 27) //Esc, 放弃 
formlcancel(); 


} 
(2) 在 < body > 标记 中 ,添加 onkeydown 事件 属性 ,代码 如 下 : 
< body onkeydown = "doByKey( )"> 


2. 数据 有 效 性 验证 


在 表单 提交 前 ,通常 需要 验证 数据 的 有 效 性 ,验证 数据 有 效 性 除了 采用 传统 的 程序 编码 
外 ,采用 正则 表达 式 验 证 数据 有 效 性 的 效率 更 高 ,编程 量 较 少 。 采 用 正则 表达 式 验 证 数据 的 


有 效 性 ,有 三 个 步骤 : 书写 正则 表达 式 ; @ 创 建 正则 表达 式 对 象 ; @ 验 证 数据 。 
例如 ,要 验证 一 个 Email 是 否 正确 ,可 以 编写 下 面 的 代码 : 
function checkemail( str) 


{ 
// 在 Javascript 中 ,正则 表达 式 使 用 "/" 开 头 和 结束 ,不 使 用 双 引 号 





var Expression= /\wt+ ([—.]\Ww+t)*@\wt([-—.]\wt)x\.\wt([-—.]\w+t)*/; 


var objExp = new RegExp(Expression); 
if (objExp. test(str) == true) 
return true; 
else 
return false; 


} 


在 完成 了 一 种 类 型 数据 的 有 效 性 验证 的 函数 后 ,可 以 修改 表单 提交 函数 ,使 用 各 个 表单 


域 的 有 效 性 验证 函数 , 即 : 
< input type = "button" value = "确定 " onclick = "formlsubmit()"> 
表单 提交 函数 事件 onclick 对 应 的 函数 formlsubmit () 代 码 形式 如 下 : 


function formlsubmit () 


{ 
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if (myform. email. value=="") 
{ 
alert(" 请 输入 Email 地 址 !"); 
myform. email. focus( ); 
return false; 
} 
if (!checkemail(myform. email. value)) 
{ 
alert(" 您 输入 的 Email 地 址 不 正确 !"); 
myform. email. focus( ); 
return false; 
} 
// 其 他 输入 域 验证 
forml. submit( ); 


} 


当 用 户 单 击 “ 确 认 ” 按 钮 时 ,执行 用 户 定义 的 表单 检查 程序 ,检查 各 个 输入 域 数据 的 有 效 
性 ,如 果 数 据 全 部 有 效 ,最 后 执行 默认 的 表单 处 理 函数 , 即 提交 表单 。 


本 章 小 结 


本 章 首先 介绍 了 程序 设计 的 基本 概念 ,目的 是 使 读者 从 思想 上 对 编程 有 一 个 基本 的 认 
识 。 然 后 讲解 了 浏览 器 的 基本 工作 原理 ,概要 介绍 了 JavaScript 程序 设计 语言 的 一 般 语言 
要 素 ,包括 基 本 字符 、 数 据 与 数据 类 型 ,表达 式 ,语句 和 函数 等 ,这 是 所 有 程序 设计 语言 都 共 
有 的 成 分 ,也 是 本 章 JavaScript 和 下 一 章 JSP 服务 器 编程 的 语言 基础 。 只 有 程序 设计 语言 
的 语句 是 不 能 编写 复杂 的 应 用 程序 的 ,还 需要 一 个 开发 环境 ,也 就 是 说 ,需要 特定 的 函数 库 
或 类 库 。 因 此 , 接 下 来 讲解 了 JavaScript 编程 用 到 的 标准 库 , 这 就 是 : JavaScript 内 部 对 象 
及 函数 ,浏览 器 对 象 和 HTMEL 文档 对 象 ,以 及 Web 前 端 开发 中 使 用 广泛 的 jQuery 程序 库 。 
最 后 ,讲解 了 Web 交互 中 表单 输入 的 数据 获取 、 数 据 的 有 效 性 验证 ,页面 之 间 的 交互 等 多 个 
实例 ,以 及 多 个 综合 例子 ,来 讲解 这 些 内 部 对 象 的 功能 和 使 用 ,所 讲述 的 代码 都 来 源 于 我 们 
的 研发 项 目 , 是 Web 开发 中 最 具 共 性 的 内 容 , 有 很 好 的 实用 性 。 


习 题 


~、 简 答题 

1. Web 浏览 器 的 基本 功能 是 什么 ? 为 什么 要 有 客户 端 脚 本 语言 ? 

2. JavaScript 语言 有 哪 几 个 组 成 部 分 ? 简 述 各 个 部 分 的 功能 。 

3. 在 JavaScript 中 ,myArray 二 new Array(10) 是 什么 意思 ? 如 何 定 义 一 个 3X4 的 二 
维 数组 ? 

4. 什么 是 网 页 对 象 ? 简 述 window 对 象 和 document 对 象 常用 的 属性 和 方法 。 

5. 画 出 HTML DOM 对 象 层次 图 。 文 档 对 象 document 有 哪些 常用 的 属性 和 方法 ? 

6. 什么 是 IntelliSense 技术 ? 如 何 知道 一 个 html 标记 或 一 个 JavaScript 内 部 对 象 有 哪 
些 属性 或 方法 ? 


7. 有 哪些 常用 的 浏览 器 事件 ? 它们 是 如 何 触发 的 ? 

8. 什么 是 正则 表达 式 ?” 写 一 个 正则 表达 式 , 实 现 验 证 密码 是 否 由 6 一 8 位 的 字母 , 数 
字 、 下 画 线 和 英文 句点 (. ) 组 成 的 正则 表达 式 。 

9. 对 于 表单 输入 ,编写 脚本 程序 ,完成 下 列 功能 : 

(1) 不 提交 表单 ,检测 输入 密码 是 否 一 致 

(2) 通过 单 击 一 个 复 选 框 ,来 实现 一 组 复 选 框 的 全 选 或 取消 操作 。 

(3) 编写 检查 Email 输入 框 输入 的 Email 格式 是 否 正确 的 函数 。 

(4) 编写 检查 电话 输入 框 输入 的 电话 号 码 是 否 正 确 的 函数 。 

10. 在 表单 输入 中 ,如 何 设置 onKeyPresss 事件 属性 ,使 得 按 回 车 键 后 ,使 输入 焦点 移 
向 下 一 个 表单 元 素 ,而 不 是 提交 表单 ? 

11. 有 一 个 网 页 a. htm, 包 含 一 个 超 链 接 < a href 王 "b. htm? username 一 hao& -account 一 
111">, 在 网 页 b. htm 中 写 一 个 函数 获取 传人 的 参数 及 参数 值 。 

12. 什么 是 网 页 对 话 框 ? 使 用 网 页 对 话 框 , 打 开 一 个 便条 输入 页 面 ,将 输入 内 容 在 父 窗 
口中 列表 显示 。 

13. 在 站 点 首页 中 ,包含 一 个 login 表单 ,包含 用 户 账户 、 密 码 输入 框 和 "登录 ”按钮 ,利用 
jQuery 和 AJAX 技术 ,编写 登录 验证 用 户 账户 和 密码 的 函数 , 设 服务 端 程序 为 login. jsp。 

二 、 阅读 理解 题 

1. 阅读 下 面 代码 , 写 出 运行 结果 。 

<html> 

<head> 

<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 

</head > 


<body> 
< select name = "sel"onchange = "document. write(document. all. sel. value);"></select> 





< script type = "text/javascript"> 
var counts= 0; 
Var arr = new Array("text1", "text2", "text3", "text4"); 
counts = arr. length; 
for (i=0;i<counts; i++) 
{ 
document.all. sel. options[i] = new Option(arr[i],("val" +1i)); 
</script> 
</body > 
</html > 


2. 说 明 下 列 函 数 的 功能 。 
// 参 数 str 为 一 个 字符 串 


function convert(str) 
{ 
if (str!= "") 
{ 
str= str. replace(/\r/g, "<br>"); 
str= str. replace(/\s/g, "&nbsp;"); 
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} 


return str; 


} 


三 、 编程 题 

1. 利用 div, 设 计 一 个 总 是 置 于 页 面 右上 角 的 图 片 广 告 , 即 当 用 户 单 击 垂直 滚动 条 时 ， 
图 片 一 直 在 浏览 器 窗口 的 右上 角 。 

2. 编写 一 个 程序 ,在 客户 区 的 中 央 显 示 一 个 300 X 200 大 小 的 div, 并 且 可 以 用 鼠标 
拖 动 。 

3. 编写 代码 , 当 用 户 在 浏览 器 窗口 单 击 时 ,在 屏幕 右 下 角 弹 出 一 个 窗口 ,显示 单 击 位 置 
的 (x,y) 坐 标 值 。 

4. 编写 一 个 将 网 页 中 的 表格 导出 为 Excel 表 , 并 打印 的 程序 。 

5. 编写 一 个 利用 CSS 样式 实现 打印 页 面 指定 内 容 和 分 页 打印 功能 的 程序 。 








第 6 章 服务 端 编 程 


【本 章 导 读 】 

一 个 Web 应 用 系统 ,总 是 分 成 两 部 分 , 即 客 户 端 程序 和 服务 端 程序 。 客 户 端 程序 在 用 
户 的 浏览 器 中 运行 ,展示 应 用 逻辑 和 负责 数据 的 输入 及 验证 。 服 务 端 程序 是 在 Web 服务 器 
上 运行 的 ,客户 端 提交 数据 后 ,服务 端 程序 负责 数据 的 处 理 和 存储 操作 。Web 服务 器 上 配 
置 了 不 同 的 服务 器 脚本 程序 解释 引擎 ,以 执行 相应 的 服务 器 脚本 程序 。 目 前 ,常用 的 Web 
服务 器 脚本 程序 有 JSP(Java Server Page)、ASP(Active Server Page) 和 PHP(Hypertext 
Preprocessor)@。 服 务 器 脚本 程序 语言 的 选择 是 由 服务 器 操作 系统 所 决定 的 ,在 Web 应 用 
的 开发 中 ,Java 技术 以 其 平台 无 关 性 受到 开发 人 员 的 欢迎 ,作为 Java 技术 的 一 种 实现 ,结合 
Servlet 和 JavaBean ,使 得 JSP 成 为 众多 Web 应 用 首选 的 编程 语言 。 

本 章 围绕 Java 技术 ,以 JSP 编程 为 例 , 详 细 介 绍 Web 应 用 中 服务 端的 编程 问题 。 主 要 
内 容 包 括 Java 程序 设计 基础 以 及 JSP 技术 两 个 方面 。 在 Java 程序 设计 中 ,概要 性 地 介绍 
了 Java 程序 设计 中 的 概念 ,包括 语言 基础 及 常用 的 Java 包 , 为 JSP 编程 做 好 概念 上 的 铺 
垫 。 在 JSP 技术 中 ,以 任务 驱动 的 方式 ,讲解 了 服务 器 开发 中 遇 到 的 共性 问题 及 解决 办 法 ， 
包括 : JSP 中 的 数据 类 型 及 其 转换 、 数 组 与 集合 类 、 文 件 操作 .JSP 内 置 对 象 JSP 中 的 参数 
传递 方法 以 及 JDBC 与 数据 库 编 程 。 最 后 ,简要 介绍 了 Web 系统 开发 的 基本 过 程 。 

【知识 要 点 】 

6.1 节 : 浏览 器 /服务 器 (B/S) 体 系 架构 ,Web 服务 器 ,服务 端 脚本 引擎 ,服务 端 脚本 程 
序 ,MyEclipse 集成 开发 环境 ,字符 编码 ,安全 漏洞 ,SQL 注入 ,Cookie 自 改 , 跨 站 脚本 攻击 ， 
跨 站 请 求 伪 造 , Web 应 用 防火 墙 (WAF)。 

6. 2 节 : Java 程序 设计 语言 的 特点 ,类 的 概念 ,类 的 定义 ,类 型 修饰 符 , 对 象 , 构 造 函 数 ， 
析 构 函数 ,继承 ,派生 , 基 类 ,派生 类 ,抽象 类 , 履 盖 (Overriding) , 重 载 (Overloading), 包 , 接 
口 ,Java 基础 类 库 , 异 常 ,可 查 异 常 ( 非 运行 时 异常 ,编译 异常 ) ,不 可 查 异 常 (运行 时 异常 ) 。 

6. 3 节 : CGI,Java Servlet 。 

6.4 节 : JSP 运行 环境 ,JSP 指令 ,JSP 声明 .JSP 元素, 基本 数据 类 型 ,包装 类 ,数组 ,JSP 
内 置 对 象 ,request 对 象 ,response 对 象 , session 对象,application 对 象 ,out 对 象 ,JavaBean。 

6.5 节 : 数据 库 服务 器 ,数据 库 管 理 系 统 ,MySQL,JDBC 接口 ,JDBC 数据 库 驱 动 程序 ， 
JDBC API,java. sql 包 ,SQL 语言 ,数据 库 操作 。 


@ PHP 脚本 语言 ,其 缩写 来 源 于 最 早 的 Personal Home Page, 它 是 由 Rasmus Lerdorf 于 1994 年 创建 的 语言 ,主要 
用 于 维护 个 人 网 页 以 及 统计 网 页 的 访问 量 。1995 年 对 外 发 布 PHP 1.0,1996 年 发 布 PHP 2. 0。1997 年 , 随 着 PHP 解释 
机 的 重 写 ,PHP 3 发 布 ,并 更 名 为 Hypertext Preprocessor* 原 始 缩写 被 保留 。 
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6.6 节 : 文件 上 传 , 表 单数 据 处 理 ,页 面 间 的 数据 传递 ,jspsmartupload 文件 上 传 组 件 ， 
CKeditor 富 文 本 编辑 器 。 

6.7 节 : 用 户 需求 分 析 , 概 要 设计 ,功能 设计 ,数据 库 设 计 , 产 品 设计 ,单元 测试 , 桌 前 检 
查 , 交 又 阅读 ,代码 走 查 ,和 白 侈 测试 ,黑金 测试 ,思维 导 图 ,数据 建 模 。 


6.1 互联 网 中 的 Web 应 用 系统 


从 应 用 模式 上 看 ,计算 机 应 用 系统 可 分 为 单机 程序 客户 机 /服务 器 (Client/Server,C/S) 
计算 机 应 用 系统 和 浏览 器 /服务 器 (Browser/Server, B/S) 计 算 机 应 用 系统 三 种 类 型 。 单 机 
程序 是 传统 的 计算 机 应 用 模式 ,将 程序 安装 在 计算 机 上 ,程序 的 运行 不 需要 网 络 的 支持 。 
C/S 应 用 系统 和 B/S 应 用 系统 都 是 借助 于 网 络 的 计算 机 应 用 模式 。C/S 模式 将 计算 机 应 
用 分 成 客户 端 和 服务 器 两 个 部 分 ,两 者 共同 完成 程序 功能 。B/S 模式 本 质 上 也 是 一 种 C/S 
模式 ,所 不 同 的 是 在 客户 端 不 需要 专用 的 客户 端 程序 ,只 需要 Web 浏览 器 就 可 以 了 。 

基于 B/S 计算 模式 的 计算 机 应 用 称 为 Web 应 用 ,一 个 Web 应 用 是 由 大 量 的 网 页 组 成 
的 。 在 网 页 中 , 既 包 含 客户 端 浏 览 器 中 运行 的 脚本 程序 ,也 包含 服务 端 运 行 的 脚本 程序 。 不 
同 于 客户 端 脚本 程序 ,服务 端 脚 本 程序 的 运行 需要 特定 的 服务 器 脚本 引擎 。 在 Web 系统 
中 ,服务 端 脚本 程序 的 功能 主要 是 数据 操作 ,因此 ,在 服务 端 通常 还 需要 安装 数据 库 服 务 器 ， 
以 支持 系统 中 的 数据 存储 和 管理 ,形成 浏览 器 、Web 服务 器 和 数据 库 服务 器 的 三 层 架构 。 


6.1.1 B/S 三 层 结 构 


20 世纪 80 年 代 , 随 着 计算 机 网 络 技 术 的 发 展 ,出 现 了 基于 网 络 的 客户 机 /服务 器 (C/S) 
计算 机 应 用 模式 。C/S 模式 通常 架设 在 企业 局 域 网 中 ,实现 了 数据 的 集中 统一 管理 ,保证 了 
数据 的 实时 性 和 一 致 性 。 但 是 ,在 互联 网 环境 .C/S 体系 结构 表现 出 了 许多 局 限 性 ,突出 的 
问题 就 是 ,不 同 的 用 户 在 客户 端 需要 安装 特定 的 客户 
程序 ,整个 系统 的 维护 非常 复杂 。 客户 端 测 览 器 | Gov) 

随 着 互联 网 的 发 展 , 出 现 了 基于 Web 的 浏览 器 / 
服务 器 (B/S) 三 层 体系 结构 。 这 种 体系 结构 将 计算 Web 服 务 器 本 
机 应 用 分 为 三 层 : 表示 层 ` 业 务 多 辑 层 和 数据 库 服务 (中 同 按 制 层 ，| [二 押 过 
层 ,B/S 三 层 体 系 结构 如 图 6-1 所 示 。 -~ 六 

在 B/S 三 层 体系 结构 模式 下 ,客户 端 不 再 需要 数据库 服务 器 和 
安装 特定 的 客户 端 应 用 程序 ,取而代之 的 是 通用 的 | 
Web 浏览 器 软件 ,所 有 的 用 户 业 务 逻 辑 都 被 部 署 在 ”图 6-1 B/S 三 层 结构 的 分 层 功能 界定 
新 的 中 间 层 上 。 新 的 中 间 层 往往 是 一 组 公共 网 关 接 
口 (Common Gateway Interface,CG 了 ) 程 序 .CGI 程序 接收 Web 浏览 器 发 送 的 数据 ,按照 业 
务 逻 辑 对 数据 进行 处 理 ,并 向 浏览 器 返回 处 理 结果 。 早 期 的 CGI 程序 一 般 用 C/C++ 开发 ， 
随 着 Java 技术 的 发 展 , 出 现 了 专用 的 Java Servlet 程序 。 因 为 Servlet 编程 复杂 ,又 出 现 了 
Java Server Page 技术 ,可 以 将 数据 库 操 作 的 SQL 语句 和 输出 混合 写 在 一 个 JSP 网 页 中 ,从 
而 简化 页 面 编程 。 

将 数据 库 操作 和 输出 写 在 一 个 JSP 页 面 中 ,虽然 方便 ,但 增加 了 网 络 攻击 的 风险 ,例如 

















容易 进行 SQL 注入 攻击 。 因 此 ,更 加 安全 的 用 法 依然 是 客户 端 页 面 中 提交 的 Form 表单 ， 
其 action 属性 调用 Servlet,Servlet 调用 相应 的 Java 类 处 理 数据 ,以 防止 SQL 注入 攻击 。 

在 B/S 三 层 体系 结构 中 ,客户 端 浏 览 器 只 是 负责 数据 的 输入 ,客户 端 脚本 程序 对 输入 
数据 进行 有 效 性 验证 ,然后 发 送 到 服务 器 端 。 所 有 的 应 用 逻辑 几乎 都 是 在 Web 服务 器 中 执 
行 的 ,这 种 程序 的 执行 是 通过 Web 服务 器 上 安装 的 脚本 程序 引擎 来 完成 的 。 此 时 , Web 服 
务 器 就 不 仅 要 发 送 网 页 , 它 还 负责 将 网 页 发 送 给 脚本 引擎 ,以 执行 其 中 的 脚本 程序 ,这 被 视 
为 是 Web 服务 器 的 一 种 功能 扩展 ,因此 中 间 层 又 称 为 Web 服务 器 层 。 在 Web 服务 器 上 ， 
通过 运行 CGI/Servlet/JSP 页 面 , 接 受 来 自 客 户 端 浏 览 器 的 请 求 , 以 及 完成 对 数据 库 的 操 
作 ,然后 返回 处 理 结果 数据 给 客户 端 浏览 器 。 


6.1.2 服务 端 程序 


严格 地 讲 ,服务 端 程序 是 指 在 服务 器 上 运行 的 程序 ,服务 端 程序 接收 客户 端 发 送 的 数 
据 , 对 数据 进行 处 理 。 服 务 端 程序 是 多 种 多 样 的 ,并 不 局 限于 特定 的 编程 语言 。 但 是 ,从 程 
序 运 行 的 角度 讲 , 服 务 端 程序 的 运行 依赖 于 服务 器 计算 机 操作 系统 、Web 服务 器 和 应 用 服 
务 器 的 配置 。 不 同 的 Web 服务 器 ,配置 的 服务 器 脚本 引擎 不 同 ,就 决定 了 服务 端 程序 的 编 
程 语 言 。 例 如 ,如 果 Web 服务 器 采用 Apache 服务 器 ,一 般 需 要 配置 Tomcat 应 用 服务 器 ， 
此 时 就 决定 了 服务 端 程序 是 基于 Java 的 程序 。 如 果 是 Windows 服务 器 ,使 用 内 置 的 IIS 作 
为 Web 服务 器 , 则 内 置 了 ASP 引擎 ,就 决定 了 服务 器 程序 是 ASP 程序 ,而 不 是 其 他 程序 。 

什么 是 服务 端 脚本 引擎 呢 ? 简单 地 讲 , 脚 本 引擎 就 是 指 脚本 程序 的 运行 环境 ,负责 脚本 
程序 的 解释 ,来 具体 处 理 用 相应 脚本 语言 书写 的 脚本 命令 。 常 用 的 脚本 引擎 有 Windows 
Server IIS 中 ASP 解释 器 ,开源 的 Tomcat 等 。 其 中 , ASP 脚本 引擎 是 内 置 的 ,只 能 在 
Windows 服务 器 上 运行 。Tomcat 有 多 个 版 本 ,可 安装 在 Linux、Windows 和 Mac OS 中 , 它 
是 Java Servlet 和 JSP 的 容器 ,负责 Java 程序 的 运行 。 

在 Web 服务 器 上 安装 了 服务 端 脚本 引擎 后 ,进行 简单 的 配置 ,然后 就 可 以 在 网 页 中 编 
写 服务 端 脚本 程序 了 。 和 客户 端 脚本 程序 书写 在 < script ></script > 标记 对 内 不 同 , 服 务 端 
脚本 程序 一 般 书写 在 定 界 符 “*<%” 和 *%>” 内 ,包含 服务 器 脚本 程序 的 网 页 称 为 服务 器 页 。 
常见 的 服务 器 页 有 JSP(Java Server Page)、ASP(Active Server Page) 等 。 

【 例 6-1】 服务 器 页 面 与 JSP 程序 运行 示例 。 

用 SublimeText 代码 编辑 器 或 MyEclipse 集成 开发 环境 编辑 一 个 包含 服务 端 脚 本 程序 
的 网 页 (test. jsp) ,代码 清单 如 下 : 

<%@ page contentType = "text/html;charset = gb2312" % > 

<%! 

String datestr= ""; 

对 > 

<html > 

<body> 

<% 

java. util.Date nowdate = new java. util. Date( ); 

java. text. DateFormat df = new java. text.SimpleDateFormat("yyyy ~ MM- dd HH:mm"); 


datestr = df.format(nowdate); 
datestr = datestr. substring(0,16); 
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多 > 

现在 的 时 间 是 : <% = datestr %> 

</body> 

</html > 

这 是 一 个 典型 的 JSP 文件 ,可 以 看 出 , 它 是 Java 程序 和 HTML 标记 的 混合 体 。 看 起 来 
比较 乱 ,需要 一 个 习惯 的 过 程 。 此 外 ,由 于 程序 代码 和 HTML 标记 混在 一 起 ,需要 注意 格 
式 ,特别 是 空格 ,否则 也 会 产生 运行 错 。 例 如 : <% 二 datestr%>、“<%” 和 “二 ”之 间 不 能 有 空 
格 , 有 的 用 户 习惯 加 一 个 空格 ,使 格式 看 起 来 美观 ,但 却 会 产生 错误 。 

如 何 执行 服务 器 页 中 的 服务 端 脚本 程序 呢 ? 和 客户 端 脚本 程序 不 同 , 只 要 打开 网 页 , 浏 
览 器 将 执行 客户 端的 脚本 程序 。 但 是 ,服务 端的 脚本 程序 是 在 服务 端 脚本 引擎 中 执行 的 , 因 
此 ,这 就 需要 在 服务 端 安装 脚本 引擎 ,并 进行 配置 。 

要 运行 JSP 页面, 必须 要 安装 Tomcat 并 进行 相应 的 配置 ,详细 内 容 请 阅读 第 2 章 的 介 
绍 。 为 本 章 示例 程序 说 明 的 方便 ,在 Tomcat 主 配置 文件 \conf\ server. xml 中 创建 虚拟 目 
录 , 即 < Context path 王 "/mybook" docBase 王 "d:N\haosite" />, 将 JSP 页 面 保 存在 d:\ 
haosite 文件 夹 中 。 然 后 ,在 浏览 器 地 址 栏 输 入 “http://127.0.0.1/mybook/test. jsp”, 运 行 
结果 如 图 6-2 所 示 。 
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图 6-2 JSP 页 面 运行 结果 示例 


当 用 户 在 浏览 器 地 址 栏 中 输入 网 址 后 ,Tomcat 服务 器 按照 网 址 找到 用 户 要 浏览 的 网 
页 test. jsp, 因 为 是 服务 器 页 ,Tomcat 将 首先 执行 其 中 的 脚本 程序 ,执行 结束 后 将 结果 页 面 
发 送 给 用 户 浏览 器 ,这 就 是 服务 端 脚本 程序 执行 的 过 程 。 

在 客户 端 ,选择 浏览 器 的 “查看 ”>“ 源 文件 "菜单 命令 ,可 以 看 到 服务 器 发 送 到 客户 端的 
网 页 代码 , 它 不 是 原始 的 jsp 文件 内 容 , 而 是 JSP 脚本 运行 后 生成 的 HTML 代码 。 

本 例 中 JSP 页 面 生成 的 HTML 代码 如 下 : 


<html> 
<body> 


现在 的 时 间 是 : 2012-01-28 16:30 


</body > 


</html > 


如 果 JSP 页 面 中 还 包含 客户 端 脚本 程序 ,用 户 可 以 通过 客户 端 脚本 程序 ,对 服务 器 上 
生成 的 数据 进行 操作 ,来 完成 功能 强大 的 Web 页 面 编 程 。 


6.1.3 服务 端 开发 


在 JavaScript 编程 中 ,只 需要 一 个 SublimeText 代码 编辑 器 就 可 以 了 。 因 为 JavaScript 
是 一 种 解释 型 的 客户 端 脚本 程序 ,不 需要 编译 和 链接 ,可 以 直接 在 浏览 器 中 执行 。 但 是 , 服 
务 端 脚本 程序 不 同 , 它 的 运行 不 仅 需 要 服务 端 脚本 引擎 ,有 时 候 还 需要 相应 的 语言 编译 器 。 
因此 ,编写 服务 端 脚本 程序 ,通常 需要 安装 相应 的 集成 开发 环境 。 

目前 ,在 Web 开发 中 ,Eclipse 和 MyEclipse 都 是 最 常用 的 Web 集成 开发 环境 , 自 带 
JDK 和 Tomcat ,无 须 单独 安装 Java 运行 环境 。 在 第 4 章 ,我们 已 经 对 两 个 开发 环境 进行 了 
简要 介绍 。 在 本 章 , 为 了 后 续 各 节 程 序 代 码 的 编辑 和 调试 需要 ,我 们 对 MyEclipse 集成 开发 
环境 的 应 用 做 一 个 简单 梳理 。 

1. 创建 用 户 工作 空间 (Workspace) 

在 现代 软件 集成 开发 环境 中 ,工作 空间 是 用 户 在 一 个 开发 环境 中 工作 环境 的 集合 ,通常 
为 一 个 文件 夹 ,里 面包 含 了 环境 配置 文件 ,用 户 创 建 的 Project 文件 夹 等 。 在 MyEclipse 中 ， 
工作 空间 的 默认 文件 夹 为 C:\users\workspaces\MyEclipse 2015。 为 管理 项 目 方便 ,一 般 
不 采用 默认 文件 夹 作为 自己 的 工作 空间 ,而 是 修改 为 D 盘 或 其 他 非 系统 盘 根 路 径 下 的 一 个 
文件 夹 , 例 如 D:\HaoMyeclipseWorkspaces。 创 建 完成 后 ,会 在 根 目录 下 创建 两 个 文件 夹 
metadata 和 Servers, 这 是 MyEclipse 系统 管理 用 户 工作 空间 用 到 的 ,用 户 无 须 修改 。 

2. 新 建 项 目 (Project) 

软件 开发 的 第 一 步 是 新 建 项 目 (Project) ,一 个 项 目 包 含 了 系统 中 相关 的 所 有 文件 ,项 
目 保 存在 用 户 空 间 中 。 创 建 一 个 新 的 Project 分 为 以 下 几 个 步 又 : 

(1) 打开 “文件 ”菜单 ,执行 New 一 Web Project 菜单 命令 ,创建 一 个 Web 项 目 ,打开 
New Web Project 对 话 框 。 

(2) 在 New Web Project 对 话 框 .输入 Project Name, 例 如 : HaoExampleProject, 选 择 
默认 存储 位 置 ,在 项 目 配置 中 列 出 了 Java 版 本 。 

(3) 设置 项 目 源 文件 和 编译 文件 输出 的 位 置 , 采 用 默认 值 不 变 。 

(4) 设置 WebModule 配置 ,包括 Context Root、Content Directory 以 及 要 生成 的 
index. jsp 和 web. xml 文件 。 

(5) 配置 Project Libraries, 添 加 项 目 中 用 到 的 库 , 默 认 包 括 Java EE 6 Generic Library， 
JSTL Library ,采用 默认 值 。 

如 果 是 已 经 存在 的 项 目 (Project) ,可 以 通过 MyEclipse 的 File 菜单 中 的 Import 命令 导 
入 ,项 目 将 在 MyEclipse 中 打开 。 

3. 在 项 目 中 添加 源 程序 

新 建 项 目 完 成 后 ,就 可 以 在 项 目 中 添加 源 程序 等 文件 了 。 源 程序 有 Java 类 文件 和 JSP 
文件 两 种 ,Java 类 文件 保存 在 src 文件 夹 下 相应 的 包 ( 子 文件 夹 ) 中 ,JSP 文件 保存 在 
WebRoot 或 其 子 文件 夹 中 ,在 WebRoot 中 通常 需要 新 建 一 系列 子 文件 夹 ,如 images( 保 存 
图 片 文 件 ) ,pubjs (保存 公共 JavaScript 文件 ), pubcss( 保 存 公共 样式 ),pubpro( 保 存 公共 
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JSP 文件 ) ,database( 保 存 系统 数据 库 文件 ) ,以 及 与 系统 功能 相对 应 的 子 文件 夹 。 

在 项 目 中 添加 程序 分 两 种 情况 : 

(1) 将 一 个 已 有 的 文件 添加 到 项 目 中 ,首先 复制 (Ctrl 十 C) 文 件 , 然 后 ,在 MyEclipse 左 
侧 的 树 状 目录 中 ,在 src 文件 来、WebRoot 或 相应 的 子 文件 夹 节点 上 单 击 , 按 Ctrl 十 V 组 合 
键 粘贴 文件 到 相应 文件 夹 中 。 

将 一 个 已 有 的 Java 文件 复制 到 当前 项 目 , 可 能 会 因为 原 有 文件 的 包 定义 等 原因 ,导致 
在 新 的 位 置 出 现 错误 ,在 文件 和 文件 夹 名 的 左下 角 显 示 桂 色 “!” 或 红色 “x”。 双 击 该 文件 ， 
在 文件 编辑 窗口 ,鼠标 指向 错误 行 首 的 橙色 "1" 或 红色 “x”, 显 示 错 误 信息 。 

(2) 在 项 目 中 新 建文 件 ,在 左 侧 窗口 项 目 树 状 目录 的 src 或 WebRoot 节点 上 右 击 ,打开 
快捷 菜单 ,指向 New 级 联 菜单 中 ,显示 可 以 在 WebProject 项 目 中 添加 的 文件 类 型 ,包括 
HTML、CSS XML JavaScript Servlet\JSP 等 ,选择 要 建 的 文件 类 型 。 

在 MyEclipse 中 添加 已 有 的 Java 类 文件 或 JSP 文件 ,由 于 保存 文件 和 打开 文件 使 用 的 
编码 不 同 可 能 导致 出 现 乱 码 。 此 时 可 执行 MyEclipse 中 Windows 一 Preferences 菜单 命令 ， 
打开 Preference 对 话 框 ,依次 单 击 General->Workspace, 在 右 侧 的 Text File encoding 中 选 
择 字符 编码 。 或 者 ,在 项 目 节 点 上 , 右 击 , 在 快捷 菜单 中 ,执行 Properities 命令 ,设置 Text 
file encoding 方式 。 也 可 以 先 将 文件 在 “记事 本 ”程序 中 打开 ,在 MyEclipse 中 执行 New 一 
File 命令 新 建文 件 ,将 记事 本 内 容 复 制 到 MyEclipse 新 建文 件 中 。 

4. 编译 

在 默认 状态 下 , 项目 中 的 Java 程序 采用 自动 编译 。 即 Project 菜单 中 Build 
Automatically 默认 为 色 选 状态 ,意思 是 自动 编译 , 当 用 户 在 修改 代码 保存 的 时 候 , 自 动 编 
译 。 如 果 添 加 新 文件 或 修改 文件 发 现 为 编译 ,可 以 取消 Build Automatically 勾 选 状态 ,执行 
Build All 命令 或 Build Project 命令 ,对 源 文件 进行 编译 。 

许多 情况 会 导致 项 目 不 能 正常 编译 ,这 些 问 题 可 能 在 Show View 一 Problems 窗口 列 
出 。 例 如 , 删 掉 了 项 目 中 的 Bulid Path 库 。 此 时 ,选择 当前 Project, 然 后 在 Project 菜单 中 ， 
执行 Properties 命令 ,打开 相应 项 目的 Propertie 对 话 框 ,找到 Bulid Path 项 目 , 会 看 到 错误 
的 Build path , 单 击 Remove 按钮 删除 即 可 。 然 后 ,再 执行 Build All 命令 就 可 以 编译 了 。 

5. 服务 器 部 署 

在 MyEclipse 中 ,打开 Windows 菜单 .执行 Show View 一 Servers 命令 ,打开 Servers 窗 
口 。 如 果 在 Show View 级 联 菜 单 中 找 不 到 Servers, 则 选择 Others..., 打 开 一 个 新 的 
ShowView 窗口 ,选择 MyEclipse Java Enterprise, 可 以 看 到 Servers, 单 击 即 可 打开 Servers 
窗口 ,显示 MyEclipse 自 带 的 服务 器 列表 。 

在 MyEclipse 自 带 的 MyEclipse Tomcat 服务 器 节点 上 , 右 击 ,执行 Add 一 Remove 
Deployments 命令 ,在 列表 中 ,选择 要 部 署 的 Project, 则 在 Servers 面板 窗口 显示 部 署 的 项 
目 。 此 时 ,服务 器 为 Stoped 状态 , 右 击 节点 ,执行 Start 开启 命令 即 可 。 

6. 项 目 运行 

服务 器 部 署 完毕 后 ,在 浏览 器 中 就 可 以 查看 WebProject 了 ,在 浏览 器 地 址 栏 中 输入 
Project 名 称 ,如 http://localhost: 8080/OpenLabPlatform/, 即 可 显示 项 目 中 的 index. jsp 
页 面 了 ,其 中 OpenLabPlatform 为 项 目 名 称 ,区 分 大 小 写 。 

此 时 ,外 网 用 户 也 可 以 访问 上 述 网 站 ,只 要 输入 该 计算 机 的 IP 和 项 目 名 称 即 可 ,其 中 


8080 是 MyEclipse 自 带 Tomcat 的 默认 端口 。 
6.1.4 网 页 中 的 字符 编码 


在 Web 开发 中 ,字符 编码 是 一 个 复杂 的 问题 。 无 论 是 Java 程序 .HTML 文件 还 是 JSP 
文件 ,都 是 文本 文件 ,存储 的 都 是 字符 编码 。 而 这 些 文件 的 编辑 ,编译 以 及 在 Web 浏览 器 中 
打开 等 都 与 字符 编码 方式 相关 。 在 文件 编辑 或 显示 时 ,常常 会 遇 到 中 文 乱码 问题 ,这 通常 是 
因为 字符 编码 设置 造成 的 。 

1. HTML 文件 中 的 字符 编码 问题 

静态 页 面 的 字符 编码 相对 简单 ,只 涉及 浏览 器 和 编辑 器 两 个 方面 。 在 网 页 中 ,通过 网 页 
头 部 的 < meta charset 二 "GB2312 | GBK | UTF-8"> 告 知 浏览 器 网 页 的 字符 编码 ,这 样 只 要 
在 编辑 网 页 后 ,保存 网 页 文件 时 采用 一 致 的 字符 编码 就 可 以 了 。 

使 用 不 同 的 编辑 软件 编辑 网 页 ,保存 文件 时 字符 编码 的 设置 不 同 。 例如 ,采用 
Windows* 记 事 本 ”程序 ,可 选 的 字符 编码 为 ANSI、Unicode、 Unicode big edian 和 UTF-8。 
车 采用 MyEclipse 集成 开发 环境 , 在 MyEclipse 中 ,执行 New 一 HTML (Advanced 
Template) 或 New 一 File 来 新 建 HTML 文件 ,生成 的 HTML 代码 框架 的 头 部 包含 下 列 
语句 ， 


<meta name = "content ~ type"”content = "text/htm1; charset = UTF - 8"> 


虽然 输入 中 文正 常 ,保存 也 为 UTF-8 编码 ,但 保存 后 打开 网 页 时 ,中 文 显示 乱码 。 此 
时 ,需要 在 保存 前 修改 编码 为 GBK ,然后 保存 ,保存 后 的 文件 属性 中 Text file encoding 为 
GBK ,这样 打开 网 页 时 中 文 显示 正常 。 

2. JSP 文件 中 的 字符 编码 问题 

在 JSP 页 面 中 ,通过 page 指令 (<%@ page >) 定 义 整个 页 面 的 相关 属性 以 及 网 页 处 理 
方式 ,包含 可 选 属性 pageEncoding 和 ContentType, 两 者 都 与 页 面 编码 有 关 。 其 中 ， 
pageEncoding 属性 的 功能 是 设置 JSP 页 面 文件 存储 和 读 取 所 使 用 的 字符 编码 方式 ,默认 值 
为 ISO-8859-1。contentType 属性 的 charset 设置 服务 器 运行 JSP 页 面 输出 的 字符 编码 , 即 
发 送 给 客户 端 浏 览 器 的 内 容 编码 。 在 不 设置 contentType 属性 的 charset 字符 编码 时 ,默认 
值 同 pageEncoding 字符 编码 。 

例如 : 在 MyEclipse 开发 环境 ,执行 New->JSP(Advanced Templetes) 快 捷 菜单 命令 ， 
新 建 一 个 JSP 文件 ,在 文件 开始 ,包含 下 列 page 指令 : 


<%(@ page language = "java" import = "java.util. * " pageEncoding= "ISO -8859 -1"%> 


在 page 指令 中 ,pageEncoding 属性 的 默认 值 为 ISO-8859-1 字符 编码 。 虽然 所 有 的 编 
码 方式 都 可 以 显示 中 文 , 但 一 般 情 况 下 ,需要 将 编码 方式 设置 为 GBK 或 UTF-8。 此 时 , 修 
改 pageEncoding 王 "ISO-8859-1" 为 pageEncoding 二 "GBK", 输 入 几 个 中 文字 符 , 然 后 保存 
文件 ,此 时 文件 保存 时 将 采用 pageEncoding 设置 的 编码 . 即 GBK 编码 。 





@ GBK 全 称 (汉字 内 码 扩展 规范 ),GBK 编码 是 在 GB2312 一 1980 标准 基础 上 的 内 码 扩展 规范 ,使 用 了 双 字 节 编码 
方案 , 共 收 录 了 21 003 个 汉字 ,完全 兼容 GB2312 一 1980 标准 ,支持 国际 标准 ISO/IEC10646-1 和 国家 标准 GB13000-2010 
中 的 全 部 中 日 韩 汉字 ,并 包含 了 BIG5 编码 中 的 所 有 汉字 。 
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可 以 通过 查看 文件 属性 来 查看 文件 存储 所 采用 的 字符 编码 。 在 上 述 JSP 页 面 上 右 击 ， 
在 快捷 菜单 中 ,执行 Properities 命令 ,显示 文件 属性 对 话 框 , 包 含 文件 的 Text file encoding 
属性 设置 ,如 图 6-3 所 示 。 
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图 6-3 JSP 文 件 属性 设置 


在 文件 属性 对 话 框 中 ,显示 Text file encoding 为 GBK, 即 对 应 JSP 文件 中 的 
pageEncoding 属性 设置 。 在 网 页 文件 属性 页 面 的 Text file encoding 区 域 选 择 Other 单 选 
按钮 ,可 选择 的 编码 方式 有 : ISO-8859-1.US-ASCII.UTF-8 和 UTF-16, 此 时 ,如 果 选 择 编 
码 和 JSP 文件 内 容 编 码 不 一 致 , 则 会 导致 文件 中 的 中 文 显示 出 现 乱 码 。 

如 果 pageEncoding 采用 默认 编码 ISO-8859-1, 在 保存 文件 时 将 提示 选择 编码 方式 ,如 
果 此 时 选择 Save AS UTF-8, 在 文件 的 Properties 设置 页 面 ,在 Text file encoding 区 域 , 显 
示 Default 为 ISO-8859-1,Other 被 选中 ,显示 UTF-8, 即 按 UTF-8 编码 存储 。 虽 然 两 者 编 
码 方式 不 同 ,但 页 面 显 示 正 常 。 此 时 ,在 Other 列表 中 ,如 果 选 择 任何 其 他 编码 方式 ,不 管 和 
pageEncoding 设置 是 否 一 致 ,中 文 显示 都 会 出 现 乱 码 。 

3. 代码 编辑 时 的 字符 编码 问题 

在 Web 开发 中 ,页 面 编辑 的 工具 很 多 ,例如 : Windows* 记 事 本 ”程序 ,Sublime 代码 编 
辑 器 ,UltraEdit 编辑 器 ,MyEclipse 集成 开发 环境 等 。 它 们 都 可 以 创建 和 编辑 文本 文件 ,在 
一 个 编辑 软件 中 编辑 的 网 页 ,在 另外 的 编辑 器 中 打开 时 ,可 能 会 出 现 汉 字 乱 码 。 

例如 : 用 记事 本 程序 编写 一 个 JSP 文 件 , 当 复制 到 MyEclipse 开发 环境 中 打开 时 ,中 文 
出 现 乱 码 ,但 是 在 记事 本 中 是 正常 的 。 为 什么 会 这 样 呢 ? 我 们 举例 说 明 ,用 记事 本 新 建 一 个 
文本 文件 ,输入 一 段 JSP 内 容 : 


<%@ page contentType = "text/html;charset = UTF ~- 8" %> 





< html > 
<body > 
你 好 

</body> 
</html > 


保存 文件 ,命名 为 aaa. txt, 然 后 重 命名 为 aaa. jsp。 然 后 将 其 复制 到 MyEclipse 中 ,在 
MyEclipse 中 打开 aaa. jsp 文件 ,显示 中 文 乱码 。 把 aaa. jsp 拖 放 到 Windows 记事 本 窗口 打 
开 , 显 示 正 常 。 为 什么 会 这 样 呢 ? 因为 记事 本 采用 默认 的 系统 编码 存储 ( 即 ANSI 编码 ) ,但 
是 在 MyEclipse 中 , 却 用 UTF-8 编码 方式 打开 , 故 出 现 乱 码 。 此 时 ,在 记事 本 中 将 aaa. jsp 
文件 另存 为 aaa-2. jsp, 选 择 编码 UTF-8, 然 后 将 aaa-2. jsp 复制 到 MyEclipse 打开 ,显示 正 
常 。 由 此 可 见 ,一 个 文件 打开 和 存储 只 要 使 用 的 编码 相同 , 则 显示 正常 。 

对 于 JSP 文 件 , 在 文件 内 部 可 以 通过 pageEncoding 属性 设置 文件 的 存储 和 处 理 方式 ， 
因此 ,对 于 记事 本 默认 存储 的 文件 ,也 可 以 设置 pageEncoding 二 "GBK" (操作 系 统 的 本 地 化 
默认 设置 ), 即 在 记事 本 中 ,将 上 述 代码 的 第 一 行 修改 为 : 


< 外 四 page contentType = "text/html;charset = utf - 8" pageEncoding = "GBK" %> 


重新 保存 ,然后 复制 到 MyEclipse, 打 开 该 文件 , 则 同样 显示 正常 。 在 MyEclipse 中 查 
看 该 页 面 的 Text file encoding 属性 ,与 pageEncoding 设置 相同 ,所 以 显示 正常 。 

除了 文件 编辑 中 可 能 出 现 乱 码 外 ,在 Web 运行 中 ,比如 : 提交 表单 .网址 参数 中 包含 中 
文字 符 时 ,也 有 可 能 会 出 现 中 文 乱码 问题 ,具体 内 容 我 们 将 在 6. 6. 1 节 的 表单 提交 中 介绍 。 


6.1.5 网 络 攻击 与 信息 安全 


在 互联 网 环境 中 ,每 一 个 Web 系统 时 刻 都 处 于 被 攻击 的 状态 。 如 果 系统 中 包含 敏感 数 
据 , 例 如 用 户 账户 、 密 码 .身份 证 .工作 单位 家庭 住 址 .银行 账户 等 个 人 信息 ,犯罪 分 子 可 以 
获取 这 些 用 户 数据 ,进行 信息 交易 和 实施 各 种 电子 诈骗 犯罪 。 因 此 ,建设 Web 系统 ,在 保证 
功能 的 前 提 下 ,保证 系统 信息 安全 是 Web 系统 开发 的 重要 内 容 。 

Web 系统 安全 来 自 两 个 方面 : 一 方面 是 服务 器 系统 的 网 络 安全 ,包括 操作 系统 、Web 
服务 器 安全 配置 ,如 未 禁用 文件 列表 ,攻击 者 可 下 载 Java 类 ,通过 反 编 译 获 取 系 统 重要 信息 
等 ; 另 一 方面 是 Web 系统 编程 安全 。 理 论 上 讲 , 一 个 Web 系统 就 是 客户 浏览 器 和 Web 服 
务 器 通过 HTTP 交互 通信 的 过 程 ,攻击 者 通过 在 浏览 器 端 安装 插件 可 以 容易 地 获取 服务 器 
端 信息 ,以 及 分 析 服 务 端 网 页 内 容 及 结构 ,从 而 得 到 敏感 数据 。 

目前 ,对 Web 系统 实施 网 络 攻击 ,或 者 说 常见 的 Web 系统 安全 漏洞 有 : 注入 
(Injection) 攻 击 ,Cookie 算 改 ,失效 的 身份 认证 和 会 话 管理 .不 安全 的 直接 对 象 引 用 , 跨 站 脚 
本 攻击 (Cross Site Scripting) , 跨 站 请 求 伪造 (Cross Site Request Forgery) ,Webshell, 弱 口 
令 等 。 

上 述 许 多 攻击 都 可 以 通过 编码 来 阻止 ,例如 : 注入 攻击 ,其 原因 就 是 应 用 程序 缺少 对 用 
户 输入 进行 安全 性 设计 ,攻击 者 将 一 些 包含 指令 的 数据 发 送 给 解释 器 ,欺骗 解释 器 执行 计划 
外 的 命令 。 常 见 的 注入 攻击 有 : SQL 注入 ,XSS 注入 (HTML 标签 注入 ,JS 代码 注入), 命 
令 注 入 ,SOAP 注入,LDAP 注入 ,XPATH 注入 等 。 

例如 : 在 登录 对 话 框 ,通常 可 进行 SQL 注入 攻击 。 因 为 ,一般 的 账户 登录 对 话 框 ,客户 
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端 输入 用 户 账户 和 密码 ,服务 端 会 根据 用 户 输 入 ,生成 SQL 查询 语句 ,攻击 者 根据 上 述 基 本 
原理 ,通过 输入 特殊 的 所 谓 “ 万 能 ”密码 ,使 得 查询 条 件 为 真 ,从 而 突破 账户 和 密码 保护 ,登录 
系统 。 例 如 : 在 输入 端 输入 账户 为 x, 密 码 为 y, 则 服务 端的 SQL 语句 一 般 为 : 

SELECT * 

FROM datatable 

WHERE useraccount = 'x' AND password = 'y' 

一 般 情况 下 ,许多 设计 人 员 喜 欢 用 admin 作为 管理 员 账 户 , 此 时 ,如 果 在 输入 账户 中 输 
入 admin, 密 码 框 输入 : 1'or '1'=='1 

则 在 服务 端 生成 的 查询 条 件 为 : 


WHERE useraccount = 'admin' RND password= '1'or '1'='1 


上 述 条 件 表 达 式 显然 为 真 , 此 时 即使 在 用 户 账 户 框 输入 任意 账户 字符 串 ,条 件 也 为 真 ， 
也 可 以 顺利 地 登录 系统 。 如 果 稍 加 修改 ,分 别 在 用 户 账户 和 密码 框 中 输入 : 

用 户 地 户 ; 'or 'a'=='a 

密码 : 'or 'a'=='a 

即 可 轻易 通过 验证 。 

出 现 上 述 攻击 的 原因 就 是 在 编程 时 逻辑 上 考虑 不 周 ,对 单 引号 没有 进行 过 滤 ,构造 出 了 
结果 为 真 的 逻辑 表达 式 , 从 而 导致 了 漏洞 的 出 现 。 除 此 之 外 ,采用 Session 验证 和 cookie 验 
证 ,如 果 不 进 行 输入 过 滤 , 也 可 能 导致 安全 漏洞 。 为 更 好 地 防治 Web 系统 攻击 ,除了 对 系统 
进行 检测 外 ,还 可 以 安装 Web 应 用 防火 墙 (Web Application Firewall, WAF), 以 提高 Web 
系统 的 安全 性 。 


6.2 Java 程序 设计 基础 


计算 机 程序 设计 语言 很 多 ,在 数量 众多 的 计算 机 程序 设计 语言 中 ,Java 语言 具有 跨 平 
台 特 性 ,Java 程序 可 以 在 Windows 操作 系统 、Linux 操作 系统 和 MacOS 上 运行 ,具有 更 好 
的 可 移植 性 ,具有 “编写 一 次 ,到 处 运行 ”的 特性 ,是 编程 语言 的 伟大 创举 。 因 此 ,Java 语言 
是 Web 后 端 (服务 端 ) 开 发 最 常用 的 编程 语言 .成 为 继 HTML 后 ,互联 网 发 展 历 史上 的 第 二 
个 里 程 碑 。 今 天 ,Java 技术 已 经 无 处 不 在 ,从 桌面 PC 到 科学 超级 计算 机 和 互联 网 ,从 智能 
手机 到 各 种 智能 设备 ,几乎 所 有 的 网 络 和 设备 上 都 会 看 到 Java 技术 的 身影 。 
6.2.1 Java 程序 设计 语言 

20 世纪 90 年 代 ,Sun 推出 了 Java 技术 ,包括 : Java 虚拟 机 、Java 程序 设计 语言 和 Java 
开发 工具 包 (Java Development Kit,JDK) 。 在 计算 机 语言 发 展 史 上 ,Java 技术 是 革命 性 的 ， 
Java 虚拟 机 的 出 现 , 彻 底 解决 了 程序 的 可 移植 性 问题 ,使 得 Java 编写 的 程序 能 够 “编写 一 
次 ,到 处 运行 ”。 

从 语言 本 身 讲 ,Java 程序 设计 语言 和 传统 的 C/C++ 等 程序 设计 语言 类 似 ,都 包含 基本 
符号 .数据 ,数据 类 型 .表达 式 \ 流 程控 制 、 类 与 对 象 等 程序 设计 语言 的 概念 。 从 语法 上 讲 ， 


Java 和 C/C++ 等 程序 设计 语言 也 非常 类 似 。 下 面 是 Java 语言 不 同 于 C++ 的 一 些 特有 性 质 : 
(1) Java 没有 主 函数 和 全 局 函数 
C++ 并 非 完全 意义 上 的 面向 对 象 语言 ,最 明显 的 例子 是 ,在 C++ 中 ,必须 有 一 个 独立 的 
主 函 数 ( 在 DOS 和 UNIX 下 是 main() ,在 Windows 下 是 WinMain()) ,还 可 以 定义 可 以 直 
接 使 用 的 全 局 函数 或 者 使 用 C++ 中 的 命名 空间 “extern C? 来 使 用 原 有 的 C 过 程 调用 。 
Java 是 完全 面向 对 象 的 语言 , 它 没有 主 函 数 等 完全 孤立 的 东西 ,任何 函数 都 必须 隶属 
于 一 个 类 。 当 然 ,任何 程序 都 有 一 个 人 口 ,Java 程序 也 有 主人 口 函 数 ,名 称 同样 是 main()， 
但 它 包 含 在 一 个 类 中 ,一 般 形 式 是 : 
public class AppName{ 
public static void main( String args[ ]) 
. 1/ 代码 
} 
} 
(2) Java 没有 全 局 变量 
在 Java 程序 中 ,不 能 在 类 外 面 定义 全 局 变量 ,只 能 通过 在 一 个 类 中 定义 公用 静态 变量 
来 实现 全 局 变量 。 例 如 : 
class GlobalVar { 


public static GlobalVarName'; // 全 局 变量 定义 
} 


因为 public static 成 员 是 一 种 类 属 成 员 变量 ,只 要 定义 了 类 ,其 中 的 类 属 成 员 变量 就 分 
配 空间 ,而 不 需要 必须 声明 类 的 对 象 , 使 得 其 他 类 可 以 访问 和 操作 该 变量 。 

可 见 , 在 Java 中 ,对 全 局 变量 进行 了 更 好 的 封装 。 而 在 C++ 中 ,不 依赖 于 任何 类 的 不 加 
封装 的 全 局 变量 往往 会 导致 系统 崩溃 。 

(3) Java 没有 结构 和 联合 

在 C++ 中 ,为 了 保持 和 C 的 兼容 ,继续 支持 结构 (struct) 和 联合 (union)。 但 是 ,在 Java 
中 , 则 完全 握 弃 了 这 些 面 向 过 程 时 代 的 概念 。 

(4) 字符 串 不 再 是 字符 数组 

在 C 和 C++ 中 ,字符 串 操作 往往 会 导致 许多 内 存 问题 ,如 内 存 非法 操作 、 内 存 泄 漏 等 。 
因为 字符 串 char * s 和 不 定 界 的 字符 数组 char s[] 是 等 价 的 。 但 两 者 只 是 为 变量 s 分 配 一 
个 指向 字符 串 的 指针 ,存储 字符 串 内 容 的 内 存 需 要 申请 和 释放 。 

在 Java 中 ,字符 串 和 字符 数组 已 经 被 分 开 了 。 字 符 串 是 一 个 完全 意义 上 的 对 象 , 需 要 
用 String 类 来 声明 ,拥有 String 类 的 属性 和 方法 。 

(5) Java 没有 独立 的 头 文件 

在 C++ 中 ,每 一 个 . cpp 实现 文件 都 对 应 一 个 . h 头 文件 ,在 头 文件 中 ,往往 包含 了 . cpp 
文件 中 用 到 的 类 的 定义 。 在 Java 中 ,类 的 所 有 数据 (属性 和 方法 ) 都 被 放 到 一 个 单独 的 文件 
中 ,类 中 方法 的 实现 必须 在 定义 的 过 程 中 同时 进行 。 

因为 类 方法 的 实现 代码 必须 在 方法 定义 时 完成 ,但 是 一 个 函数 往往 是 几 十 行 或 者 几 百 
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行 的 程序 代码 ,这样 就 使 得 阅读 类 很 难 一 下 子 就 看 到 一 个 类 的 全 貌 。Java 的 设计 者 已 经 考 
虑 到 了 这 个 问题 ,为 此 ,在 JDK 中 提供 了 两 个 工具 来 补偿 ,Javadoc 为 源 代码 提供 标准 的 
HTML 文档 ,Javap 来 打印 类 标识 。 

(6) 数据 类 型 

在 C/C++ 中 ,对 于 不 同 的 操作 系统 平台 ,编译 器 对 简单 数据 类 型 int、float 等 分 配 不 同 
大 小 的 内 存 空间 。 例 如 ,int 在 IBM PC 中 为 16bit, 在 VAX-11 中 为 32bit, 这 导致 了 代码 的 
不 可 移植 性 。 但 是 在 Java 中 ,对 于 这 些 基 本 数据 类 型 ,总 是 分 配 固定 长 度 的 空间 ,int 总 是 
32bit, 这 就 保证 了 Java 的 平台 无 关 性 。 

在 C/C++ 中 通过 指针 可 以 进行 强制 类 型 转换 ,这 往往 会 带 来 不 安全 性 。 在 Java 中 ,有 
严格 的 类 型 相 容 性 检查 。 另 外 ,在 Java 中 ,没有 模板 类 ,而 C++ 中 的 模板 类 (参数 化 类 , 即 形 
式 参 数 对 应 的 实际 参数 是 数据 类 型 ) 可 以 有 效 地 简化 程序 代码 的 编写 ,但 不 能 减少 可 执行 代 
码 的 长 度 。 这 就 意味 着 ,在 Java 中 ,只 能 靠 相似 代码 的 手工 复制 和 修改 。 

(7) 常量 修饰 符 const 的 使 用 限制 

在 C++ 中 ,const 常量 修饰 符 有 着 重要 的 应 用 , 它 对 于 提高 代码 质量 起 到 了 积极 的 作用 。 
例如 ,用 户 可 以 声明 函数 参数 或 者 函数 的 返回 值 为 const 类 型 ,这样 可 以 有 效 地 防止 在 函数 
内 部 对 函数 参数 的 不 正当 修改 或 者 对 返回 值 的 修改 。 另 外 ,可 以 将 类 的 一 个 成 员 函 数 声明 
为 const ,表明 该 方法 不 能 修改 它 操作 的 任何 对 象 。 

在 Java 中 ,支持 常量 操作 符 、 只 读 变量 ,通过 final 关键 字 实现 。 但 是 ,Java 没有 提供 一 
种 机 制 ,使 得 一 个 变量 在 参数 传递 或 者 返回 的 过 程 中 只 读 ,或 者 定义 一 个 不 能 修改 操作 对 象 
的 常量 方法 。 上 述 的 省 略 ,为 Java 程序 带 来 了 一 个 可 能 引起 不 正当 修改 错误 的 隐患 。 

另外 ,在 Java 中 , 宏 也 不 再 被 支持 。 


6.2.2 类 与 对 象 


在 20 世纪 90 年 代 以 前 , 自 顶 向 下 逐步 求 精 的 结构 化 程序 设计 是 软件 开发 的 主要 方法 ， 
直到 现在 ,这 种 结构 化 的 程序 设计 思想 仍然 被 广泛 采用 。Pascal,C,Basic, Fortran 等 高 级 
程序 设计 语言 很 好 地 实现 了 结构 化 编程 的 思想 。 通 过 过 程 和 函数 (又 称 子 程序 ) ,把 一 个 复 
杂 的 问题 分 解 成 若干 个 相对 简单 的 子 问题 ,如 果子 问题 还 比较 复杂 ,再 继续 划分 ,最 后 将 划 
分 后 的 每 个 问题 用 过 程 和 函数 来 实现 。 

20 世纪 90 年 代 以 后 ,面向 对 象 技术 对 人 们 近 半 个 世纪 来 的 软件 开发 思想 产生 深刻 
的 变革 。 这 一 技术 强调 利用 软件 对 象 进行 软件 开发 , 它 将 自然 界 中 的 物理 对 象 和 软件 对 
象 相对 应 ,建立 了 类 和 对 象 的 概念 。 由 于 客观 世界 的 实体 和 软件 结构 的 对 象 一 一 对 应 ， 
从 而 增加 了 软件 系统 的 可 扩展 性 和 可 维护 性 。 面 向 对 象 技术 将 自然 界 中 的 物理 对 象 和 
软件 对 象 对 应 起 来 ,在 传统 的 数据 结构 基础 上 加 入 了 成 员 函 数 ( 方 法 ) 的 概念 ,从 而 赋予 
对 象 以 动作 。 

1. 类 与 对 象 的 概念 

类 (class) 是 包含 数据 和 处 理 这 些 数据 的 过 程 的 数据 结构 。 可 以 将 类 看 成 是 和 int,float 
等 基本 数据 类 型 一 样 的 数据 类 型 ,用 它 来 创建 数据 对 象 , 它 指定 了 相应 内 存 区 域 的 处 理 和 解 





释 规则 。 

对 象 (object) 是 用 类 来 声明 的 数据 结构 ,如 果 将 类 比 作 数据 类 型 ,对 象 就 是 相应 数据 类 
型 的 变量 。 对 象 是 类 的 实例 ,占据 确定 的 内 存 空 间 。 

2. 类 的 定义 

在 Java 中 ,用 户 可 以 定义 一 个 基 类 ,也 可 以 从 别 的 类 进行 派生 (extends) ,或 者 通过 实 
现 (implements) 一 个 或 多 个 接口 来 定义 一 个 新 的 类 。 类 定义 的 一 般 形式 是 : 

[类 型 修饰 符 ] class < 类 名 > [extends < 父 类 名 >] [implements < 接口 名 列表 >] 

| 成 员 变 量 声明 ; 

成 员 函 数 定义 ; 

} 

类 型 修饰 符 (type specifier) 声 明 类 的 类 型 ,有 4 种 : 

。 abstract: 抽象 类 ,抽象 类 必须 包含 至 少 一 个 抽象 成 员 函 数 。 抽 象 类 不 能 够 创建 对 

象 , 需 要 用 其 派生 类 创建 。 例 如 ,可 以 定义 一 个 图 形 类 CFigure, 将 其 定义 为 抽象 类 ， 
然后 从 其 派生 具体 的 图 形 类 ,例如 三 角形 类 CTringle、 矩 形 类 CRectangle 等 。 

。 public: 公有 类 ,能 被 其 他 类 访问 ,在 其 他 包 (package) 里 要 使 用 该 类 ,需要 先 用 

import 导入 ,否则 只 能 在 定义 的 package 里 使 用 。 

。 final: 最 终 类 ,说 明 一 个 类 不 能 再 派生 子 类 。 

。 synchronized: 表示 所 有 类 的 成 员 函 数 都 是 同步 的 。 一 个 程序 中 ,如 果 该 类 中 的 代 

码 可 能 运行 于 多 线程 环境 下 ,那么 就 要 考虑 同步 问题 。 在 Java 中 ,线程 间 的 通信 首 
要 的 方式 就 是 对 数据 对 象 的 共享 访问 。 这 种 通信 方式 是 高 效 的 ,但 是 可 能 出 现 线程 
间 相 互 干扰 和 内 存 一 致 性 的 问题 。 线 程 间 相互 干扰 是 指 当 多 个 线程 访问 共享 数据 
时 可 能 出 现 的 错误 ,内 存 一 致 性 错误 是 指 共享 内 存 可 能 导致 的 错误 。 

所 谓 同步 ,一 般 意义 下 是 指 两 个 或 两 个 以 上 随时 间 变 化 的 量 在 变化 过 程 中 保持 一 定 的 
相对 关系 。 在 技术 上 ,同步 指 对 系统 中 所 发 生 的 事件 之 间 进 行 协调 ,使 得 几 个 相关 的 量 保 持 
一 致 性 与 统一 化 的 现象 。 例 如 ,客户 机 和 服务 器 数据 的 同步 ,就 是 当 客户 机 或 服务 器 上 某 一 
方 的 数据 发 生 修 改 时 ,同时 修改 另 一 方 的 数据 ,以 保证 客户 机 和 服务 器 上 的 数据 一 致 。 

在 Java 中 ,同步 就 是 在 多 个 线程 对 一 个 共享 对 象 进行 操作 时 ,确保 一 个 线程 可 以 看 见 
另 一 个 线程 做 的 更 改 。 实 现 同步 的 方法 主要 是 声明 同步 方法 ,用 以 有 效 防止 线程 间 相 互 干 
扰 及 内 存 一 致 性 错误 。 为 保证 量 的 同步 ,可 能 会 产生 时 间 上 的 消耗 。 

上 述 修饰 符 可 以 同时 出 现 两 个 或 以 上 ,但 修饰 符 abstract 和 final 不 能 同时 使 用 。 

class 为 关键 字 ,表明 接 下 来 是 类 的 定义 ,类 名 是 一 个 用 户 自 定义 的 标识 符 , 通 常 采用 大 
驼峰 命名 法 , 即 每 个 单词 的 首 字符 大 写 。 

如 果 是 派生 类 ,需要 通过 extends 给 出 父 类 ,如 果实 现 接口 (interface) ,需要 由 implents 
给 出 接口 名 ,接口 可 以 是 一 个 或 多 个 。 

花 括 号 内 说 明 类 的 成 员 变量 和 成 员 函 数 ,又 称 类 的 属性 (attribute) 和 方法 (method) 。 

(1) 声明 成 员 变 量 

成 员 变 量 定义 的 一 般 形 式 是 : 

[类 型 修饰 符 ] < 类 型 > < 成 员 变量 列表 >; 
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类 型 修饰 符 包括 : public( 所 有 类 可 以 访问 )、protected( 类 的 成 员 或 派生 类 成 员 函 数 可 
以 访问 ) .private( 只 有 类 的 成 员 可 以 访问 ) ,friendly( 包 中 的 友 元 函数 可 以 访问 ) ,final( 初 始 
化 后 不 能 再 改变 其 值 的 变量 ) .volatile( 多 线程 变量 ) 。 

(2) 定义 成 员 函 数 

成 员 函 数 又 称 类 的 方法 (method) ,是 类 中 定义 的 可 对 类 进行 操作 的 函数 模块 。 成 员 郴 
数 定义 的 一 般 形式 为 : 

[类 型 修饰 符 ] 返回 值 类 型 < 方法 名 >( [形式 参数 列表 ] ) [throws 异常 列表 ] 

pe 程序 代码 ) 

} 

类 型 修饰 符 包 括 : private、public、protected, 也 可 以 是 修饰 符 final( 不 能 由 子 类 改变 的 
方法 ) .abstract (抽象 方法 ,无 方法 体 )、synchronized( 线 程 同 步 方法 ) .native( 本 机 方法 )。 

“形式 参数 列表 ?给 出 函数 的 形式 参数 及 类 型 , 形 参 之 间 用 逗号 分 隔 。 当 所 定义 的 方法 
没有 形 参 时 圆 括号 内 为 空 。 可 选项 throws 给 出 异常 列表 。 

在 成 员 变 量 和 成 员 函 数 声明 中 ,如 果 缺 省 类 型 修饰 符 , 则 成 员 变 量 或 成 员 方 法 声明 为 默 
认 权 限 ,访问 权限 为 包 级 可 见 , 同 一 个 包 内 的 类 可 以 访问 到 这 个 属性 或 方法 。 若 是 类 声明 为 
默认 权限 , 则 同一 个 包 下 的 类 都 可 以 访问 到 该 类 ,并 可 以 实例 化 该 类 (当然 如 果 这 个 类 不 具 
有 实例 化 的 能 力 除外 ,比如 该 类 没有 提供 public 的 构造 函数 )。 

修饰 符 可 以 有 一 个 或 多 个 。 另 外 ,还 可 以 用 static 来 声明 静态 成 员 变 量 和 成 员 函 数 ( 方 
法 )。 如 果 成 员 变量 包含 修饰 符 static, 此 变量 称 为 类 变量 ,不 加 static 的 变量 称 为 对 象 变 
量 。 用 static 来 声明 静态 成 员 函 数 , 表 明 此 方法 为 类 方法 ,无 static 修饰 的 方法 为 对 象 方 
法 。 使 用 静态 方法 的 好 处 是 并 不 用 实例 化 对 象 ,就 可 以 通过 类 名 . 方法 名 (的 方法 直接 
调用 。 

3. 封装 和 抽象 

在 面向 对 象 技术 中 ,一 个 主要 目标 就 是 对 象 的 封装 和 抽象 。 封 装 (Encapsulation) 是 指 
对 象 可 以 拥有 私有 元 素 , 将 内 部 细节 隐藏 起 来 的 能 力 。 抽 象 是 对 象 可 见 外 部 特征 的 描述 , 通 
常用 来 描述 对 象 所 表示 的 具体 概念 、 对 象 所 完成 的 任务 以 及 处 理 对 象 的 外 部 接口 等 。 

在 C++ 和 Java 等 面向 对 象 的 程序 设计 语言 中 ,类 的 每 一 个 成 员 都 被 说 明成 public、 
private 和 protected 型 ,用 这 些 关 键 词 来 实现 数据 的 抽象 和 封装 ,控制 对 象 属性 的 访问 
级 别 。 

类 成 员 访问 规则 如 图 6-4 所 示 。 

可 以 访问 的 有 : 


* 类 成 员 函 数 
。 友 元 类 成 员 函 数 
。 友 元 函数 


。 所 有 可 访问 private 的 函数 
protected 。 派生 类 成 员 扔 数 


， 所 有 函数 


图 6-4 类 成 员 访问 规则 


(1) 关键 词 public, 类 中 所 有 public 成 员 构 成 类 的 接口 ,它们 是 类 抽象 性 的 表现 。 出 于 
简单 、 经 济 和 安全 的 愿望 ,理论 上 讲 , 类 的 公开 元 素 越 少 越 好 。 但 是 ,类 又 必须 和 外 部 打 交 
道 ,public 成 员 是 不 可 缺少 的 

(2) 关键 词 private, 类 中 的 private 成 员 只 能 被 类 的 成 员 函 数 、 友 元 类 或 外 部 友 元 函数 
访问 ,从 而 实现 类 的 封装 性 。 在 默认 状态 下 ,所 有 的 成 员 都 是 私有 的 。 

(3) 关键 词 protected ,在 面向 对 象 技术 中 ,派生 是 类 的 重要 性 质 。 类 的 private 成 员 将 
不 能 被 派生 类 中 的 成 员 访问 ,这 就 大 大 限制 了 类 的 灵活 性 。 类 的 protected 成 员 可 以 被 类 的 
派生 类 成 员 访 问 。 

4. 静态 成 员 

支持 封装 和 抽象 的 另外 机 制 是 关键 词 static。 在 C 中 ,通过 关键 词 static 可 以 实现 有 限 
的 封装 。 当 一 个 变量 在 一 个 函数 内 部 被 说 明成 static 形式 时 ,该 变量 就 只 在 函数 中 存在 ,并 
且 只 在 函数 内 部 有 效 。 另 外 ,一 个 全 程 变量 被 说 明成 static 形式 时 ,该 变量 只 在 其 所 在 的 文 
件 内 有 效 ,这 样 可 以 避免 不 同文 件 中 全 局 变量 的 重 名 。 

在 C++ 和 Java 中 , 当 一 个 类 成 员 被 说 明成 static 时 , 则 该 成 员 在 程序 中 只 有 一 个 副本 存 
在 ,而 不 是 在 每 个 对 象 中 都 有 一 个 副本 。 所 有 的 对 象 共 享 类 中 的 静态 成 员 。 在 一 些 面向 对 
象 的 程序 设计 语言 中 ,静态 成 员 被 称 为 类 变量 ,或 类 属 变量 。 

例如 ,定义 一 个 含有 静态 成 员 变量 的 类 如 下 : 


class CS { 
static int a; 


int b,c,d; 
}; 
CS objs[3]; 
在 类 CS 中 ,包含 四 个 成 员 变量 ,其 中 成 员 变量 a 为 静态 成 员 变 量 。 数 组 objs 包含 三 个 
CS 类 对 象 ,由 于 CS 类 包含 一 个 静态 成 员 变量 a, 因 此 三 个 CS 本 于 | 
对 象 共享 一 个 静态 成 员 变量 a, 每 个 对 象 都 包含 自己 的 普通 成 ”objs[0] 


员 变 量 bc.d, 如 图 6-5 所 示 。 

还 可 以 把 一 个 成 员 函 数 说 明成 static, 这 意味 着 在 没有 任 obis] 
何 该 类 对 象 的 情况 下 , 它 仍 然 可 以 被 执行 。 正 因 如 此 ,静态 成 
员 函 数 能 够 完成 不 需要 任何 对 象 成 员 变量 的 操作 。 静 态 成 员 
变量 和 静态 成 员 函 数 为 类 存储 和 管理 属于 整个 类 而 不 是 个 别 
对 象 的 信息 提供 了 方法 。 

5. 构造 函数 

在 面向 对 象 技术 中 ,对 象 是 类 的 实例 ,每 个 对 象 必须 按照 类 的 定义 来 创建 ,这 种 机 制 是 
通过 类 的 构造 函数 来 实现 的 。 构 造 函 数 (Constructor) 是 一 种 特殊 的 成 员 函 数 ,用 来 在 内 存 
中 建立 具体 的 对 象 。 构 造 函 数 必须 申请 必要 的 内 存 空 间 .将 内 存 转化 为 具体 的 对 象 ,初始 化 
成 员 变 量 等 。 构 造 函 数 的 名 称 和 类 名 称 相同 ,一 个 类 可 以 拥有 几 个 带 有 不 同 参 数 的 构造 函 
数 。 构 造 函 数 没 有 返回 类 型 和 返回 值 。 

与 一 般 函 数 不 同 ,构造 函数 不 是 由 用 户 显 式 调用 (Call) 的 , 它 是 通过 编译 器 来 调用 的 ， 
称 为 激活 (Invoke)。 当 通过 new 创建 一 个 类 的 对 象 时 ,相应 的 构造 函数 被 激活 ,来 完成 内 


coclaeoeclaoc 


objs[2] 





图 6-5 类 CS 的 成 员 
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存 对 象 的 初始 化 操作 等 。 

在 使 用 构造 函数 时 ,需要 注意 以 下 情况 : 

(1) 构造 函数 不 能 描述 为 const( 不 变 的 ) 和 volatile( 可 变 的 )。 

(2) 构造 函数 不 能 是 static, 因 为 构造 函数 需要 初始 化 类 的 成 员 变 量 , 但 静态 构造 函数 
不 能 访问 成 员 变 量 。 

(3) 构造 函数 不 能 被 继承 。 当 一 个 没有 构造 函数 的 类 从 一 个 含有 构造 函数 的 类 派生 
时 ,将 写 它 自己 的 构造 函数 。 

(4) 构造 函数 不 能 有 返回 值 ,也 不 可 以 是 void。 

(5) 定义 一 个 类 时 ,必须 明确 定义 除 默认 构造 函数 和 复制 构造 函数 以 外 的 所 有 其 他 构 
造 函 数 。 默 认 构 造 函 数 是 不 含有 参数 的 构造 函数 ,可 以 省 略 不 写 。 

6. 类 的 继承 性 与 派生 类 

从 现存 的 对 象 出 发 建立 一 种 新 的 对 象 类 型 ,使 它 继承 原 对 象 的 特点 和 功能 ,这 就 是 对 象 
的 继承 性 。 继 承 是 许多 层次 对 象 的 自然 描述 。 从 现存 类 派生 出 新 类 时 ,现存 类 称 为 基 类 
(Base Class) ,派生 出 的 新 类 称 为 派生 类 。 派 生 类 可 以 对 基 类 作 如 下 变化 : 

。 增加 新 的 成 员 变量 。 

。 增 加 新 的 成 员 函 数 。 

。 重 新 定义 已 有 的 成 员 函 数 , 即 子 类 可 以 对 父 类 的 方法 覆盖 (Overriding ) 或 重 载 

(Overloading) 。 所 谓 覆 盖 , 是 指 在 子 类 中 定义 了 与 父 类 中 同名 的 函数 ,这 时 将 根据 
当前 的 对 象 类 型 执行 子 类 中 的 代码 , 即 父 类 中 的 代码 被 覆盖 。 所 谓 方法 重 载 是 类 中 
含有 同名 ,但 特征 参数 (参数 数量 ,参数 类 型 ) 不 同 的 方法 ,编译 时 通过 形式 参数 确定 
要 调用 的 方法 。 

神 盖 或 重 载 反 映 了 面向 对 象 中 函数 的 多 态 性 , 重 载 是 一 种 编译 时 多 态 技术 ,因为 程 
序 在 编译 时 可 以 根据 特征 参数 决定 要 连接 哪个 同名 函数 。 覆 盖 则 是 一 种 运行 时 多 态 , 因 
为 ,具体 运行 基 类 还 是 子 类 的 函数 是 根据 运行 时 对 象 所 属 的 类 决定 的 ,因此 是 一 种 运行 
时 多 态 。 

。 改变 现 有 成 员 函 数 的 属性 。 

派生 类 不 能 删除 基 类 的 成 员 变量 和 成 员 函 数 .实际 上 派生 类 往往 是 基 类 的 扩充 ,是 一 种 
具体 化 和 完善 的 过 程 。 

类 的 派生 创建 了 一 个 类 族 , 派 生 类 的 对 象 也 是 基 类 的 一 个 对 象 , 它 可 用 在 基 类 对 象 可 被 
使 用 的 任何 地 方 。 可 用 多 态 成 员 函 数 来 调整 这 种 关系 ,以 使 得 派生 类 在 某 些 地 方 与 它 的 基 
类 一 致 ,而 在 另外 一 些 方面 表现 出 其 自身 的 行为 特征 。 

类 的 派生 是 一 种 演化 过 程 , 即 通过 扩展 .更 改 和 特殊 化 从 一 个 已 知 类 出 发 来 建立 一 个 新 
的 类 。 类 的 派生 建立 了 一 个 具有 共同 关键 特性 的 类 族 ,从 而 实现 代码 的 重用 。 假 设 从 一 个 
已 知 基 类 A 建立 一 个 派生 类 B, 一 般 形式 为 : 

class B extends A 

{ 


// 派 生 类 B 的 成 员 说 明 
}; 


读 作 “类 B 由 A 派生 ”, 它 告诉 编译 器 类 B 是 一 种 A, 对 基 类 A 所 做 的 修改 和 添加 在 括 





号 内 给 出 。 在 派生 类 对 象 中 ,编译 器 在 内 存 中 总 是 先 放 入 基 类 的 成 基 关 成 风 








员 ,后面 是 派生 类 特有 的 成 员 ,如 图 6-6 所 示 。 二 
从 派生 类 对 象 的 内 存 结构 看 ,虽然 派生 类 对 象 包含 了 父 类 的 成 特有 成 员 


员 ,但 是 ,对 于 一 个 派生 类 ,对 于 其 父 类 中 的 成 员 , 其 访问 须 遵循 特定 
的 访问 控制 规则 。 

7. 创建 对 象 

当 定义 类 后 ,创建 对 象 有 两 种 方法 : 一 种 是 静态 声明 ,例如 CTest myObj; 则 创建 一 个 
CTest 类 的 对 象 myObj。 此 外 ,还 可 使 用 new 来 动态 创建 对 象 , 一 般 形 式 是 : 

对 象 变量 = new 类 (< 实际 参数 表 >); 


如 果 类 的 构造 函数 带 有 参数 ,可 以 通过 new 中 类 名 后 面 的 参数 来 激活 相应 的 构造 函 
数 , 来 实现 对 类 成 员 的 初始 化 。 如 果 是 一 个 派生 类 ,还 涉及 基 类 成 员 的 初始 化 问题 。 

8. Java 程序 与 main() 方 法 

所 有 的 程序 都 应 该 有 一 个 主 程序 , 它 是 程序 开始 执行 的 入 口 。 在 一 个 Java 程序 中 , 通 
常 定义 多 个 类 ,但 只 能 有 一 个 public 类 ,在 该 类 中 有 一 个 public static void main(String[ ] 
args) 方 法 ,这 个 方法 就 是 主 程序 。 文 件 名 必须 和 这 个 公有 类 的 类 名 大 小 写 完全 一 样 。 

运行 一 个 Java 程序 ,应 该 是 在 java 命令 后 跟 包含 main 函数 的 类 名 ,而 不 是 Java 程序 
的 文件 名 , 即 java < 包含 main 方法 的 java 类 >, 类 名 后 面 不 能 有 . class 等 扩展 名 。 

【 例 6-2】 定义 一 个 三 角形 图 形 类 CTriangle, 定 义 相应 的 属性 和 方法 。 并 在 DOS 模式 
下 对 文件 进行 编译 和 运行 。 

分 析 : 定义 了 一 个 三 角形 图 形 类 CTriangle, 包 含 三 个 私有 成 员 变 量 , 存 储 三 角形 的 三 
条 边 ,一 个 构造 函数 ,一 个 计算 三 角形 面积 的 成 员 函 数 和 一 个 输出 成 员 函 数 。 

文档 名 为 Exa6-02.java, 代 码 清单 如 下 : 


class CTriangle 
{ 
private double a, b,c,t; 
public double s= 0; 
CTriangle(double x, double y, double z) 
{ 
a=x; b=y;c=2; 
: 
// 计 算 三 角形 的 面积 
public double Area( ) 
. 
t= (at+b+c)/2; 
s= Math. sqrt(tx (七 一 a) x (tb)x (t-c)); 
return s; 
} 
public void out1() 
{ 


Area(); 


图 6-6 派生 类 对 象 
内 存 结构 


System. out. println("Rrea= "+s); 
} 
} 


地 由 
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class MyTest01 


{ 
public static void main(String[ ] args) 
{ 
CTriangle myobj = new CTriangle(10,20,15); 
myobj. out1( ); 
} 
} 


在 DOS 提示 符 下 ,执行 javac Exa6-02. java 命令 ,编译 ,生成 每 个 类 的 . class 文件 , 即 
CTriangle. class 和 MyTest01. class。Java 程序 的 运行 是 在 JVM 上 运行 的 ,在 DOS 提示 符 
命令 状态 下 ,执行 java MyTest01 ,运行 上 述 程序 ,输出 结果 如 图 6-7 所 示 。 





命令 提示 符 


:\Docunents and Settings hidninistrator?d: 


:Ved haobook 


:\haobook>javac Exa6-2.java 


rr 
D 中 的 
号 是 PBCR-DC82 


958 CTriangle class 


Area=72.618437741389| 





D:\haobook> 


图 6-7 Java 程序 的 编译 和 运行 





【 例 6-3】 编写 程序 ,验证 类 构造 函数 的 激活 顺序 。 

说 明 : 在 类 的 定义 中 ,都 包含 相应 的 构造 函数 ,这 些 构造 函数 的 激活 顺序 不 同 ,在 下 面 
的 例子 中 ,定义 了 三 个 类 A、B、C, 其 中 C 中 包含 两 个 对 象 成 员 ,来 展示 对 象 构造 函数 的 激活 
次 序 ,文档 名 为 Exa6-03. java, 代 码 清单 如 下 : 





classR{ 
int Ps 
A(int a, int b) 
{ 
x=a; y=b; 
} 
A() // 默 认 构造 函数 
{ 
x=0; Y=0; 
System. out. println("A constructor\n"); 
} 


classB{ 


B() 
System. out. println("B constructor\n"); 
} 
} 
classC{ 
public Aa= new A(); 
public B b= new B(); 
c() 
{ 
System. out. println("C constructor\n"); 
} 
} 
class MyTest02 
{ 
public static void main(String[ ] args) 
C myObj = new C(); 
} 
} 


执行 java MyTest02, 输 出 结果 为 : 

A constructor 

B constructor 

C constructor 

上 述 输 出 结果 表明 ,如 果 一 个 类 含有 成 员 对 象 , 则 在 创建 类 的 对 象 时 ,将 先 创 建 类 的 成 
员 对 象 , 最 后 才 是 类 的 对 象 本 身 。 


6.2.3 接口 


在 一 个 复杂 的 面向 对 象 的 系统 中 ,实现 一 个 有 更 多 方法 的 新 类 是 经 常 遇 到 的 。 当 一 个 
类 需要 从 多 个 基 类 派生 时 ,派生 类 将 继承 多 个 基 类 的 特征 ,在 C++ 中 ,这 样 的 机 制 称 为 多 重 
继承 。 在 面向 对 象 的 程序 设计 中 ,继承 关系 一 直 存在 很 多 的 争议 ,特别 是 多 重 继承 。 

在 Java 中 ,没有 多 重 继承 ,可 以 通过 接口 来 实现 相应 的 功能 。 所 谓 接口 (Interface) 是 
一 组 没有 给 出 实现 细节 的 操作 (方法 ) 的 集合 。 它 需要 别 的 类 来 实现 接口 给 出 的 每 一 个 方 
法 ,一 个 类 可 以 实现 一 个 或 多 个 接口 。 如 果 一 个 类 实现 了 某 个 接口 ,就 相当 于 声明 我 能 够 完 
成 某 项 工作 。 可 以 说 ,接口 和 类 是 实现 类 型 继承 关系 的 两 种 方法 ,一 种 是 扩展 基 类 (extends 
关系 ) 继 承 ,一 种 是 实现 接口 (implements 关系 ) 继 承 。 

1. 接口 的 定义 和 扩展 

接口 的 定义 和 类 的 定义 类 似 ,但 是 接口 不 是 一 个 类 .而 是 对 符合 接口 要 求 的 类 的 一 套 规 
范 , 接 口 说 明了 实现 接口 的 类 该 做 什么 而 不 指定 如 何 去 做 。 接 口 定义 的 一 般 形式 是 : 

[修饰 符 ] interface < 接口 名 > [extends < 接口 列表 >] 

| 成 员 变量 ; // 默 认为 public static final 

成 员 函 数 ; // 默 认为 public abstract 
} 
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在 接口 定义 中 ,修饰 符 同类 的 定义 一 样 。 一 个 接口 可 以 扩展 另外 的 接口 ,这 跟 类 可 以 扩 
展 一 样 。 但 是 ,类 只 能 扩展 一 个 另外 的 类 ,而 接口 可 以 扩展 任意 多 个 接口 。 接 口 列表 列 出 所 
有 的 被 扩展 的 接口 ,以 逗号 分 隔 。 

接口 可 以 包含 常量 声明 以 及 方法 声明 。 所 有 定义 在 接口 中 的 常量 可 以 是 public static 
和 final。 定 义 在 接口 中 的 成 员 变 量 不 能 使 用 transient volatile 或 者 synchronized 修饰 符 。 
同样 也 不 能 在 声明 接口 成 员 的 时 候 使 用 private 和 protected 修饰 符 。 

接口 中 方法 声明 后 紧 跟 着 一 个 分 号 ,因为 接口 中 的 方法 不 需要 给 出 具体 的 实现 代码 。 
因此 ,所 有 定义 在 接口 中 的 方法 可 以 隐 伟 地 为 public abstact 方法 。 

2. 接口 的 实现 

接口 不 能 实例 化 ,为 了 使 用 接口 ,需要 编写 执行 接口 的 类 。 一 个 类 可 以 实现 一 个 或 多 个 
接口 ,一 般 形式 是 : 

[访问 修饰 符 ] class < 类 名 > implements < 接口 列表 > 

' public 成 员 函 数 ; 

} 

可 见 ,一 个 类 可 以 实现 多 个 接口 .这 就 是 多 重 继承 。 一 个 类 实现 了 某 个 接口 , 即 这 个 类 
实现 了 在 接口 中 声明 的 所 有 方法 ,就 相当 于 声明 我 能 够 完成 某 项 工作 。 实 现 接口 的 类 继承 
了 定义 在 接口 中 的 常量 ,这 些 类 可 以 使 用 简单 的 名 字 来 引用 接口 定义 中 的 常量 。 

3. 接口 和 类 差异 

接口 和 抽象 类 是 很 相似 的 ,但 两 者 表达 的 概念 不 同 。 抽 象 类 表达 的 是 一 类 事物 的 高 度 
抽象 ,其 派生 类 与 其 关系 是 一 种 "是 ”的 关系 。 例 如 ,三 角形 .和 矩形 都 是 图 形 , 可 以 说 图 形 就 是 
一 个 抽象 类 。 而 接口 定义 的 是 一 组 行为 规范 ,一 个 类 实现 一 个 接口 ,就 是 类 的 “行为 需要 按 
照 接 口 来 完成 ”。 因 此 ,抽象 类 在 定义 类 型 方法 的 时 候 , 可 以 给 出 方法 的 实现 部 分 ,也 可 以 不 
给 出 ; 而 对 于 接口 来 说 ,其 中 所 定义 的 方法 都 不 能 给 出 实现 部 分 。 

除了 概念 上 的 不 同 外 ,在 技术 上 ,两 者 的 不 同 还 包括 以 下 几 个 方面 : 

(1) 类 只 能 单 重 继承 ,接口 可 以 实现 类 的 多 重 继承 , 即 一 个 类 可 以 实现 多 个 接口 。 

(2) 类 可 以 实例 化 (抽象 类 除外 ) ,接口 没有 实例 化 的 概念 ,需要 用 类 去 实现 接口 。 

(3) 类 有 构造 函数 .运算 符 重 载 等 概念 ,接口 没有 。 

(4) 类 的 成 员 可 以 有 修饰 符 ( 如 虚拟 .静态 等 ) ,接口 成 员 没 有 任何 修饰 符 , 其 成 员 总 是 
公共 的 。 

(5) 派生 于 接口 的 类 必须 实现 接口 中 所 有 成 员 的 成 员 函 数 , 而 从 类 派生 则 不 需要 。 

在 类 的 层次 结构 定义 中 ,应 从 概念 上 确定 究竟 是 定义 类 还 是 接口 。 一 般 情 况 下 ,抽象 类 
或 普通 类 在 现实 世界 中 都 与 某 类 事物 所 对 应 。 而 接口 不 同 , 它 不 对 应 现实 世界 中 的 任何 事 
物 , 即 使 是 抽象 的 , 它 只 是 为 事物 之 间 的 联系 规定 了 一 种 联系 规范 。 例 如 ,在 Web 浏览 器 表 
单数 据 处 理 的 描述 上 ,定义 接口 比 定义 抽象 类 更 符合 人 们 的 思维 习惯 。 


6.2.4 包 


在 大 型 软件 工程 中 ,怎样 保证 程序 员 之 间 命名 的 类 不 重 名 ,以 及 如 何 避 免 供应 商 提 供 的 
类 和 程序 员 自 己 命名 的 类 不 重 名 呢 ? 虽然 有 许多 方法 可 以 避免 重 名 ,但 是 如 果 在 发 现 问题 








以 前 ,工程 已 经 启动 了 ,要 修改 这 些 重 名 问题 ,就 变 得 非常 麻烦 。 

在 Java 中 ,引入 包 (Package) 的 概念 来 解决 上 述 问 题 。 包 通过 集合 类 来 划分 命名 空间 ， 
在 不 同 包 内 的 类 可 以 同名 ,但 不 会 引起 混乱 。 包 的 概念 很 简单 ,其 实 就 是 一 个 文件 来。 一 般 
情况 下 ,每 一 个 类 或 接口 都 被 存储 在 不 同 的 文件 中 ,为 了 管理 和 使 用 方便 ,对 于 那些 相关 的 
类 和 接口 可 以 绑 定 到 一 个 包 中 , 即 存储 在 一 个 文件 夹 中 。 

在 一 个 文件 夹 中 ,文件 是 不 能 重 名 的 。 但 是 ,在 不 同 的 文件 夹 中 ,可 以 有 重 名 的 文件 存 
在 。 例 如 ,在 JDK 中 ,有 多 个 不 同 的 包 都 包含 名 称 为 Date 的 类 ,在 java. util 包 中 有 Date 
类 ,在 java. sql 包 中 也 有 一 个 名 为 Date 的 类 ,因为 在 不 同 的 包 中 ,这 种 重 名 不 会 引起 编译 和 
应 用 错误 。 

1. 定义 包 

使 用 package 语句 可 以 将 一 个 编译 单元 ( 源 程序 文件 ) 定 义 成 包 。 如 果 使 用 package 语 
句 , 编 译 单元 的 第 一 行 必须 无 空格 ,也 无 注释 ,格式 如 下 : 


package < 包 名 >; 


若 编译 单元 无 package 语句 , 则 该 单元 被 置 于 一 个 默认 的 无 名 的 包 中 。 

按照 一 般 的 习惯 , 包 名 是 由 字符 “. "分隔 的 单词 构成 的 ,第 一 个 单词 通常 是 开发 这 个 包 
的 组 织 的 名 称 。 

例如 : 有 一 个 Java 文件 ,文件 名 为 B. java, 内 容 如 下 : 

package hao. yy; 

public class B { 


B(int yy, int mm, int dd) 
{ 


System. out. println("Year:"+yy+ "Month:"+mm + "Date" + dd); 
} 

} 

执行 javac -d d:\ B.java 命 令 , 其 中 参数 -d < 目录 > 为 指定 输出 文件 的 目录 。 因 此 ,上 述 
编译 命令 执行 后 将 在 "d:\ "目录 下 创建 一 个 d:\hao\yy 文件 夹 ,该 文件 夹 中 包含 了 编译 后 的 
类 文件 B. class。 

现在 这 个 包 就 创建 好 了 ,要 使 用 这 个 包 中 的 类 B, 需 要 导入 ,或 者 把 d:\hao\yy 设置 在 
环境 变量 classpath 里 。 

2. 使 用 包 中 的 类 和 接口 

在 Java 编程 中 ,如 果 要 使 用 JDK 类 库 或 用 户 自 定义 在 一 个 包 中 的 类 和 接口 ,在 源 程序 
文件 的 开始 ,需要 通过 import 关键 词 导 和 ,主要 有 两 种 形式 : 

(1) 单 类 型 导入 , 即 导 入 包 中 一 个 具体 的 类 或 接口 , 则 导入 的 类 和 接口 的 名 字 在 当前 的 
名 字 空 间 可 用 。 导 入 语句 形式 如 下 : 

import < 包 名 .[ 类 名 | 接口 名 > 


例如 : 使 用 util 包 的 Date 类 ,可 以 写作 import java. util. Date; ,下 面 是 一 个 有 关 日 期 
处 理 的 类 的 定义 ,程序 获取 当前 的 系统 时 钟 ,并 按 MM-dd-yyyy 格式 输出 日 期 。 代 码 如 下 : 


import java. util. Date; 
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import java. text. SimpleDate; 

public class mydate 

' 

public static void main(String[ ] args) { 

//Create a date formatter that can parse dates of the form MM — dd— yyyy. 
SimpleDateFormat bartDateFormat = new SimpleDateFormat ("MM— dd— yyyy"); 
//Create a string containing a text date to be parsed. 
String dd = "6 -22- 2008"; 
Date date = bartDateFormat. parse(dd); 
//Send the parsed date as a long value to the system output. 
System. out. println(date. getTime()); 


} 


如 果 在 用 户 的 文件 中 ,用 到 一 个 包 中 的 多 个 类 或 接口 , 单 类 型 导入 书写 很 多 行 , 列 出 一 
个 个 要 导入 的 类 和 接口 ,比较 麻烦 。 

(2) 按 需 类 型 导入 ,顾名思义 ,就 是 导入 一 个 包 时 ,不 指定 要 导入 的 具体 的 类 和 接口 ,而 
是 按照 程序 需要 导入 包 中 用 到 的 类 和 接口 。 形 式 如 下 : 


import < 包 名 . x >; 


按 需 类 型 导入 ,是 不 是 要 导入 包 中 所 有 的 类 和 接口 呢 ? 当然 ,答案 是 否定 的 。 按 需 导 和 人 
仅仅 是 导入 当前 类 中 用 到 的 类 ,这 是 在 编译 时 由 编译 程序 完成 的 。 既 然 如 此 ,是 不 是 都 可 以 
写成 按 需 类 型 导入 ,而 不 用 单 类 型 导入 呢 ? 当然 也 不 行 , 因 为 单 类 型 导入 和 按 需 类 型 导入 对 
类 文件 的 定位 算法 是 不 一 样 的 。 后 者 不 仅 产生 更 多 的 编译 时 间 消 耗 , 还 有 可 能 带 来 名 称 冲 
突 和 编译 错误 。 

不 论 是 单 类 型 导入 还 是 按 需 类 型 导入 ,其 目的 都 是 要 使 用 户 在 书写 自己 的 类 时 ,能 够 使 
用 导入 的 类 和 接口 。 在 Java 中 ,还 可 以 通过 在 每 个 引用 的 类 和 接口 前 面 给 出 它们 所 在 的 包 
的 名 字 的 方式 进行 应 用 ,一 般 形 式 是 : 

包 名 .< 类 名 | 接口 名 > obj = new 包 名 .< 类 名 | 接口 名 >( 参 数 表 ); 


上 述 语句 的 可 读 性 很 强 , 不 足 是 书写 麻烦 。 例 如 ,要 使 用 上 面 定 义 的 包 hao. yy 中 包含 
的 类 ,语句 为 : 


hao.yy fd = new hao. yy.B(2003,11,24); 


在 使 用 一 个 外 部 类 或 接口 时 ,要 声明 该 类 或 接口 所 在 的 包 , 和 否则 会 产生 编译 错误 。 此 
外 ,要 确保 这 些 类 和 包 的 路 径 正确 , 即 需 要 包含 在 classpath 环境 变量 中 ,否则 编译 器 在 编译 
时 将 找 不 到 所 需要 的 类 文件 。 


6.2.5 Java 基础 类 库 


对 于 所 有 的 程序 设计 语言 ,都 可 以 分 成 两 个 部 分 : 第 一 部 分 就 是 语言 本 身 , 包 括 语言 的 
字符 集 、 数 据 、 类 型 程序 语句 、 函 数 等 语法 部 分 ; 第 二 部 分 则 是 开发 程序 用 的 标准 库 , 里 面 
包含 了 大 量 的 标准 函数 或 类 , 它 可 以 有 效 地 提高 用 户 的 编程 效率 。 

在 Java 语言 中 ,提供 了 大 量 已 经 实现 的 类 ,这 些 类 的 集合 构成 Java 基础 类 库 。 根 据 类 
的 功能 不 同 ,划分 为 不 同 的 集合 ,每 个 集合 组 成 一 个 包 。Java 类 库 日 益 庞 大 ,所 包含 的 类 和 





接口 众多 ,用 户 是 无 法 全 部 掌握 的 。 但 是 ,了 解 类 库 的 组 成 可 以 帮助 开发 者 更 方便 地 找到 需 
要 的 类 ,使 编写 的 程序 更 简单 。Java 丰富 的 类 库 资源 是 Java 语言 的 一 大 特色 ,是 Java 程序 
设计 的 基础 。 

Java 基础 类 库 大 部 分 是 由 Sun 提供 的 ,不 同 的 Java 开发 环境 包含 的 类 不 同 。 下 面 简要 
介绍 Java 基础 类 库 中 的 核心 部 分 , 即 那些 包含 最 重要 、 最 常用 的 类 和 接口 的 包 。 

1. java. lang 包 

java. lang 包 又 称 Java 语言 包 , 主 要 含有 与 语言 相关 的 类 。 定 义 了 Java 中 的 大 部 分 基 
本 类 ,包含 Java 语言 类 线程 .异常 .系统 .Object 类 以 及 各 种 数据 类 型 等 相关 的 类 。java. 
lang 包 是 Java 程序 中 默认 加 载 的 一 个 包 , 由 解释 程序 自动 加 载 ,不 需要 显 式 说 明 。 

2. java. util 包 

Java 平台 中 有 两 个 最 常用 的 基础 包 , 一 个 是 java. lang 包 , 另 一 个 就 是 java. util 包 , 即 
Java 实用 程序 包 。java. util 包 包含 了 大 量 的 公用 类 ,包括 常用 的 数学 运算 类 .字符 串 类 .日 
期 日历 类 以 及 向 量 哈 希 表 等 类 ,还 包括 一 些 接口 和 异常 类 。 

3. java.awt 包 

Java 抽象 窗口 工具 包 java. awt (Abstract Windowing Toolkit) 包 含 一 些 GUI 界面 相关 
的 类 ,包括 窗口 .对话 框 、 菜 单 . 各 种 控件 等 。awt 类 库 还 包含 一 组 用 来 处 理 绘图 、 打 印 功能 ， 
并 且 支 持 易 用 性 、 拖 放 和 二 维 图 形 的 API。 通 过 这 些 元 素 ,编程 者 可 以 控制 所 写 的 应 用 程序 
的 外 观 界面 。 

通过 awt 可 以 创建 与 平台 无 关 、 基 于 图 形 用 户 界面 的 程序 。 同 微软 的 Windows API 相 
比 , 清 楚 、 简 单 和 强大 的 awt 是 Java 语言 迅速 流行 的 重要 原因 。awt 不 仅 是 编写 Windows 
程序 的 良好 工具 ,而 且 可 以 编写 其 他 操作 系统 平台 的 图 形 界面 应 用 程序 。 

4. java. swing 包 

新 的 图 形 界 面 类 库 java. swing 继承 awt ,提供 了 多 种 图 形 界面 组 件 ,Swing 中 包含 了 标 
签 页 表格、 树 ,特殊 边框 微调 等 各 种 新 组 件 。 这 些 组 件 都 是 100% 纯 Java 的 ,不 依赖 具体 
的 Windows 系统 ,可 以 在 各 种 平台 上 实现 。Swing 中 支持 可 插入 观感 (Pluggable Look and 
Feel, PL&F) ,支持 用 户 定制 桌面 ,更 换 新 的 颜色 方案 ,让 窗口 系统 适应 特定 的 用 户 习惯 和 
需要 。Swing PL&F 体系 结构 使 得 同时 定制 Swing 控件 或 控件 组 更 加 容易 。 

5S. java.io 包 

输入 输出 包 java. io ,提供 了 全 面 的 IO 接口 ,包括 文件 读 写 、 标 准 设备 输出 等 。 它 是 以 
流 为 基础 进行 输入 输出 的 ,所 有 数据 被 串 行 化 写 和 人 输出 流 ,或 者 从 输入 流 读 入 。IL/O 体系 分 
Input/Output 和 Read/ Write 两 类 ,区 别 在 于 Read/ Write 在 读 写 文 本 时 能 自动 转换 内 码 。 
流 W/O 的 好 处 是 简单 易 用 ,缺点 是 效率 较 低 。 

Java 也 对 块 传输 提供 支持 ,在 核心 库 java. nio 中 采用 的 便 是 块 IO, 块 /O 效率 很 高 ， 
但 编程 比较 复杂 。 

6. java. beans 包 

JavaBeans 是 Java 应 用 程序 环境 的 中 性 平台 组 件 结构 。java. beans 包 定 义 了 应 用 程序 
编程 接口 (API) ,包含 与 开发 JavaBeans 有 关 的 类 和 接口 。 

7. java. net 包 6 

含有 与 网 络 操作 相关 的 类 ,如 TCP Sockets、URL 等 工具 ,该 包 支 持 TCP/IP 协议 ,并 章 
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包含 Socket 类 、URL、 与 URL 相关 的 类 。 
6.2.6 Java 异常 


在 编程 过 程 中 ,我 们 总 是 通过 各 种 条 件 判 断 来 避免 错误 的 发 生 , 但 是 有 些 问题 是 不 可 预 
知 和 无 法 处 理 的。 例如 ,在 程序 运行 中 ,可 能 会 出 现 数组 越界 非法 参数 .数据库 操作 错误 、 
文件 找 不 到 、 网 络 连接 失败 等 各 种 各 样 的 状况 。 在 程序 中 要 处 理 可 能 遇 到 的 各 种 问题 ,需要 
复杂 的 让 语句 。 

有 些 问题 是 程序 本 身 可 以 处 理 的 ,有 些 则 是 程序 本 身 无 法 处 理 的 。 程 序 无 法 处 理 的 问 
题 称 为 错误 (Error), 它 通常 与 编码 无 关 。 例 如 ,在 程序 运行 时 Java 虚拟 机 出 现 错误 。 此 
外 ,还 有 一 些 问题 是 程序 本 身 可 以 通过 编码 来 处 理 的 , 称 为 异常 (Exception)。 例 如 ,试图 使 
用 空 值 对 象 引 用 、 除 数 为 零 或 数组 越界 , 则 分 别 引 发 运行 时 异常 。 但 是 ,对 于 不 可 避免 、 不 可 
预测 的 情况 则 在 考虑 异常 发 生 时 如 何 处 理 。 

1. 异常 的 分 类 

Java 的 异常 (包括 Exception 和 Error) 可 分 为 可 查 异 常 (Checked Exception) 和 不 可 查 
异常 (Unchecked Exception) 两 大 类 ,其 中 可 查 异 常 属于 非 运 行 时 异常 (NonRuntime 
Exception) ,不 可 查 异常 属于 运行 时 异常 (Runtime Exception) 。 

(1) 可 查 异常 是 指 程序 在 运行 中 可 以 预测 的 异常 。 当 方法 抛 出 一 个 异常 时 ,表示 该 方 
法 可 能 会 出 现 某 种 错误 ,对 于 声明 抛 出 异常 的 任何 方法 ,Java 编译 器 将 强制 执行 处 理 或 声 
明 规 则 。 因 为 ,从 程序 语法 角度 讲 , 可 查 异 常 在 编译 时 就 必须 处 理 , 如 果 不 处 理 ,程序 就 不 能 
编译 通过 。 因 此 ,可 查 异 常 属 于 非 运 行 时 异常 ,又 称 编译 异常 。 

可 查 异 常 是 必须 处 理 的 , 当 函 数 中 可 能 出 现 这 类 异常 时 ,要 么 用 try-catch 语句 捕获 该 
异常 并 提示 给 使 用 者 ,要 么 用 throws 子 句 声明 抛 出 它 ,否则 编译 不 会 通过 。JVM 大 多 数 情 
况 下 不 会 处 理 程序 抛 出 的 异常 ,而 是 会 直接 终止 程序 。 常 见 的 可 查 异常 有 IOException、 
SQLException 等 ,用 户 自 定义 的 Exception 异常 也 属于 可 查 异常 。 

(2) 不 可 查 异 常 是 不 可 预知 的 ,在 程序 运行 时 发 生 的 异常 。 例 如 ,NullPointerException 
( 空 指 针 异 常 ) IndexOutOfBoundsException( 下 标 越 界 异 常 ) 等 都 称 为 不 可 查 异 常 。 不 可 查 
异常 通常 是 因为 程序 逻辑 不 严谨 引起 的 ,程序 应 该 从 人 逻辑 角度 ,例如 ,增加 让 判断 语句 ,以 
尽 可 能 避免 这 类 异常 情况 的 发 生 。 

对 于 不 可 查 异 常 ,编译 器 不 要 求 强 制 处 置 ,因为 编译 器 没有 足够 的 智能 可 以 判断 代码 是 
和 否 严谨 , 它 也 不 会 知道 运行 时 除数 是 否 为 0, 数 组 是 否 越界 等 情况 会 出 现 。 因 此 , 当 程序 中 
可 能 出 现 这 类 异常 ,即使 没有 用 try-catch 语句 捕获 它 , 也 没有 用 throws 子 句 声明 抛 出 它 ， 
也 会 编译 通过 。 程 序 中 可 以 选择 捕获 处 理 , 也 可 以 不 处 理 。 解 决 该 类 异常 最 好 的 方法 是 通 
过 条 件 判 断 尽 可 能 考虑 到 可 能 导致 异常 和 错误 的 各 种 情况 ,在 逻辑 上 解决 潜在 的 错误 。 

2. 异常 处 理 机 制 

在 编程 时 ,通过 if 语句 可 以 对 程序 运行 中 各 种 可 能 的 情况 进行 判断 ,以 避免 错误 和 异 
常 的 发 生 。 理 论 上 讲 , 这 是 正确 的 。 例 如 ,一 个 函数 可 能 会 包含 几 种 可 能 的 异常 ,可 以 设计 
返回 的 错误 码 , 让 调用 者 进行 处 理 。 但 是 ,实际 的 情况 是 , 当 函 数 层 层 调用 时 ,这些 错 误 码 的 
组 合 会 变 得 很 大 。 通 过 大 量 的 if 语句 柑 套 来 判断 各 种 情况 当然 是 可 以 的 ,但 这 使 得 代码 变 
得 非常 腔 肿 ,可 读 性 很 差 。 例 如 ,数据 库 读 写 ,打开 数据 库 会 有 多 种 情况 发 生 , 数 据 库 读 写 又 


有 多 种 可 能 的 情况 ,要 写 出 逻辑 严谨 的 函数 就 不 可 避免 地 出 现 了 复杂 的 诗 语句 内 套 。 
为 解决 上 述 编码 问题 ,在 Java 中 引入 了 异常 处 理 机 制 ,包括 抛 出 异常 和 捕获 异常 两 个 
部 分 。 抛 出 异常 就 是 当 一 个 方法 出 现 错误 引发 异常 时 .创建 异常 对 象 并 交付 运行 时 系统 , 异 
常 对 象 中 包含 了 异常 类 型 和 异常 出 现时 的 程序 状态 等 异常 信息 。 在 方法 抛 出 异常 之 后 , 运 
行 时 系统 将 转 为 寻找 合适 的 异常 处 理 器 ,寻找 处 置 异常 的 代码 并 执行 , 即 捕获 异常 。 如 果 找 
不 到 合适 的 异常 处 理 器 , 则 运行 时 系统 终止 。 同 时 ,意味 着 Java 程序 的 终止 。 
在 Java 中 ,异常 通过 try-catch-finally 语句 捕获 并 处 理 。 一 般 形式 为 : 
try{ 
// 可 能 会 发 生 异常 的 程序 代码 
}catch (ExceptionTypel e){ // 捕 获 并 处 置 try 抛 出 的 异常 类 型 Typel 
异常 处 理 
}catch (ExceptionType2 e){ // 捕 获 并 处 置 try 抛 出 的 异常 类 型 Type2 
异常 处 理 
}finalily { 
// 无 论 是 否 发 生 异常 ,都 将 执行 的 语句 块 
} 
关键 词 try 后 语句 块 对 应 可 能 发 生 异 常 的 代码 , 称 为 监控 区 域 。Java 方法 在 运行 过 程 
中 ,如 果 监 控 块 内 的 语句 出 现 异常 , 则 创建 异常 对 象 ,将 异常 抛 出 监控 区 域 之 外 ,并 结束 块 内 
后 续 语 句 的 执行 。 在 定义 异常 处 理 时 ,应 避免 定义 大 的 try 块 ,否则 将 使 得 后 续 的 异常 处 理 
没有 针对 性 ,正确 的 做 法 是 分 离 各 个 可 能 出 现 异常 的 段落 并 分 别 捕获 其 异常 。 
当 异 常 发 生 时 ,Java 运行 时 系统 试图 寻找 匹配 的 catch 子 句 捕获 异常 。 匹 配 的 原则 是 
如 果 抛 出 的 异常 对 象 属于 catch 子 句 的 异常 类 ,或 者 属于 该 异常 类 的 子 类 , 则 认为 生成 的 异 
常 对 象 与 catch 块 捕获 的 异常 类 型 相 匹 配 。 若 有 匹配 的 catch 子 句 , 则 运行 其 异常 处 理 代 
人 码 。 一 个 catch 语句 表示 预期 会 出 现 某 种 异常 ,而 且 和 希望 能 够 处 理 该 异常 。 一 种 常见 的 错 
误 是 试图 用 一 个 catch(Exception ex) 语 句 捕获 所 有 的 异常 ,由 于 绝 大 多 数 异常 都 直接 或 间 
接 从 java. lang. Exception 派生 ,catch(Exception ex) 就 相当 于 说 我 们 想 要 处 理 几 乎 所 有 的 
异常 。 这 不 符合 逻辑 。 最 明显 的 例子 是 SQLException 是 JDBC 操作 中 常见 的 异常 , 另 一 个 
可 能 的 异常 是 IOException ,显然 ,在 同一 个 catch 块 中 处 理 这 两 种 截然 不 同 的 异常 是 不 合 
适 的 。 
在 Java 的 异常 处 理 机 制 中 , 当 某 个 catch 捕获 了 一 个 异常 时 ,异常 将 改变 程序 正常 的 执 
行 流 程 。 如 果 程 序 用 到 了 文件 .Socket、JDBC 连接 之 类 的 资源 ,即使 遇 到 了 异常 ,也 要 正确 
释放 占用 的 资源 ,这 如 何 来 实现 呢 ? 虽然 可 以 在 每 一 个 catch 块 进行 处 理 , 但 更 好 的 办 法 是 
在 finally 中 集中 处 理 , 因 为 finally 语句 块 是 try 语句 最 终 都 会 执行 的 语句 块 。 
Java 异常 处 理 机 制 不 仅 避免 了 复杂 的 让 语句 嵌 套 ,增强 了 程序 的 可 读 人 性 ,还 提高 了 程 
序 的 健壮 性 ,可 以 在 catch 和 finally 代码 块 中 给 程序 一 个 修正 机 会 ,使 得 程序 不 因 异 常 而 终 
止 或 者 发 生 其 他 改变 。 同 时 ,通过 获取 Java 异常 信息 ,通过 异常 信息 很 快 就 能 找到 出 现 异 
常 的 问题 (代码 ) 所 在 ,这 为 程序 的 开发 和 维护 提供 了 方便 。 
3. 抛 出 异常 
异常 是 异常 类 的 实例 对 象 ,我 们 可 以 创建 异常 类 的 实例 对 象 ,然后 通过 throw 语句 抛 
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出 。throw 语句 的 一 般 形式 是 : 
throw new 异常 类 ; 


异常 类 可 以 是 Java 内 置 异常 类 ,也 可 以 是 用 户 自 定 义 的 异常 类 ,这 些 类 都 是 Exception 
的 扩展 类 。 例 如 , 抛 出 一 个 IOException 类 的 异常 对 象 ,可 写 为 : 


throw new IOException; 


在 throw 语句 中 , 抛 出 的 只 能 是 可 抛 出 类 Throwable 或 者 其 子 类 的 实例 对 象 。 

在 try 块 监控 区 域 ,大 多 数 异 常 是 系统 自动 抛 出 的 ,不 需要 用 户 显 式 地 书写 throw 语句 
抛 出 异常 对 象 。 在 运行 过 程 中 ,如 果 未 发 生 异 常 ,将 忽略 catch 语句 块 。 当 在 try 块 或 catch 
块 中 遇 到 return 语句 时 ,finally 语句 块 在 方法 返回 前 被 执行 。 

例如 ,在 程序 中 要 捕获 throw 语句 抛 出 的 “除数 为 0” 异常 (自动 抛 出 ) 和 数组 下 标 越 界 
异常 ,示例 代码 如 下 : 


public class TestException { 
public static void main(String[ ] args) { 

int[ ] scoreList = new int[50]; 

int total = 0; 

try { //try 监控 区 域 
for (int i = 0; i<= scoreList. length; i++) { 

System. out. println("scoreList[" + i + "] = " + scoreList[i]); 
total += scoreList[i]; 

} 
// 抛 出 异常 对 象 ArithmeticException, 也 可 省 略 该 语句 
//if (i == 0) throw new ArithmeticException(); 
System. out. println( "average score=" + total / i); 

} catch (ArrayIndexOutOfBoundsException e) { 
System. out. println("scoreList 数组 下 标 越 界 异常 ."); 

} catch (ArithmeticException e) { 
System. out. println( "程序 出 现 异 常 ,在 求 平均 成 绩 时 , 人数 为 0."); 

} finally{ 

System. out. println( "程序 正常 结束 ."); 
} 
} 


在 程序 运行 中 ,如 果 出 现 * 除 数 为 0" 错 误 ,程序 抛 出 ArithmeticException 异常 ,运行 时 
系统 创建 异常 对 象 并 抛 出 监控 区 域 , 转 而 匹配 合适 的 catch 异常 处 理 器 ,并 执行 相应 的 异常 
处 理 代 码 。 事 实 上 ,除数 为 0 等 ArithmeticException 是 RuntimException 的 子 类 ,运行 时 
异常 将 由 运行 时 系统 自动 抛 出 ,因此 ,上 述 代码 中 的 throw 语句 可 以 省 略 。 运 行 时 异常 主要 
是 因为 程序 设计 不 严谨 导致 的 ,可 以 通过 if 条件 判断 语句 避免 上 述 错误 的 发 生 。 

如 果 一 个 方法 可 能 会 出 现 异 常 ,但 没有 能 力 处 理 这 种 异常 ,可 以 在 方法 声明 处 用 
throws 子 句 来 声明 抛 出 异常 。 例 如 ,汽车 在 运行 时 可 能 会 出 现 故 障 , 汽 车 本 身 没 办 法 处 理 
这 个 故障 , 那 就 让 开车 的 人 来 处 理 。 声 明 方法 抛 出 异常 的 一 般 形式 是 : 


methodname throws Exception1,Exception2,. . ,ExceptionN 
{ 


函数 体 
} 


方法 名 后 的 throws Exception1, Exception2,... ,ExceptionN 为 声明 要 抛 出 的 异常 列 
表 。 当 方法 抛 出 异常 列表 的 异常 时 ,方法 将 不 对 这 些 类 型 及 其 子 类 类 型 的 异常 作 处 理 , 该 异 
常 将 在 调用 该 方法 的 方法 中 进行 捕获 并 处 理 。Java 编译 器 对 可 查 异 常 将 强制 进行 处 理 或 


在 调用 函数 中 进一步 抛 出 异常 。 
4. Java 常见 异常 


在 Java 中 ,提供 了 大 量 的 异常 用 来 描述 经 常 发 生 的 错误 ,对 于 这 些 异 常 ,有 的 需要 程序 
员 进 行 捕获 处 理 或 声明 抛 出 ,有 的 由 Java 虚拟 机 自动 进行 捕获 处 理 。Java 中 定义 的 异常 类 


很 多 ,通常 存储 在 java. lang 包 中 ,常用 的 Java 内 置 异 常 类 见 表 6-1。 


表 
异 党 


6-1 Java 常见 内 置 异常 列表 
说 明 





runtimeException 子 类 





ArrayIndexOutOfBoundsException 


数组 索引 越界 异常 。 当 对 数组 的 索引 值 为 负数 或 大 于 等 于 数组 


大 小 时 抛 出 





ArithmeticException 


算术 条 件 异 常 。 例 如 : 整数 除 零 等 





NullPointerException 


空 指针 异常 。 当 应 用 试图 在 要 求 使 用 对 象 的 地 方 使 用 了 null 


时 , 抛 出 该 异常 





ClassNotFoundException 


找 不 到 类 异常 。 当 应 用 试图 根据 字符 串 形式 的 类 名 构造 类 ,而 
在 遍历 CLASSPAH 之 后 找 不 到 对 应 名 称 的 类 文件 时 , 抛 出 该 






































异常 
NegativeArraySizeException 数组 长 度 为 负 异 常 
IOException 操作 输入 流 和 输出 流 时 可 能 出 现 的 异常 
EOFException 文件 已 结束 异常 
FileNotFoundException 文件 未 找到 异常 
其 他 
ClassCastException 类 型 转换 异常 类 
ArrayStoreException 数组 中 包含 不 兼容 的 值 抛 出 的 异常 
SQLException 操作 数据 库 异常 类 
NoSuchFieldException 字段 未 找到 异常 
NoSuchMethodException 方法 未 找到 抛 出 的 异常 
NumberFormatException 字符 串 转换 为 数字 抛 出 的 异常 


使 用 Java 内 置 的 异常 类 可 以 描述 在 编程 时 出 现 的 大 部 分 异常 情况 。 除 此 之 外 ,用 户 还 


可 以 自 定义 异常 。 用 户 自 定义 异常 类 ,只 需 继承 Exception 类 即 可 。 


由 于 检查 运行 时 异常 的 代价 远大 于 捕获 异常 所 带 来 的 益处 ,运行 时 异常 不 可 查 。Java 
编译 器 允许 忽略 运行 时 异常 ,如果 一 个 方法 既 不 捕获 ,也 不 声明 抛 出 运行 时 异常 ,在 程序 运 
行 时 如 果 发 生 运行 时 异常 ,将 显示 异常 并 终止 程序 的 运行 ,如 : 


Exception in thread "main" java. lang. ArithmeticException: / by zero 


at Test. TestException. main( TestException. java:8) 
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上 述 运 行 结果 表明 ,程序 运行 出 现 异 常 ,从 而 导致 程序 运行 终止 。 运 行 时 异常 通常 是 因 
为 程序 设计 不 严谨 造成 的 ,最 好 的 处 理 是 通过 if 条件 判断 语句 避免 异常 的 发 生 , 而 非 增加 
catch 捕获 异常 。 对 于 可 查 异 常 ,利用 Java 的 try-catch-finally 语句 可 以 简化 程序 代码 , 提 
高 代码 的 健壮 性 ,这 也 是 Java 异常 处 理 机 制 的 主要 目的 和 目标 所 在 。 





6.3 Java Servlet 接口 


在 Web 系统 中 ,用 户 端 通过 表单 输入 数据 , 单 击 提交 按钮 后 ,数据 通过 HTTP 协议 发 
送 到 服务 端 。 在 服务 端 , 有 相应 的 程序 读 取 表 单数 据 并 对 数据 进行 处 理 , 这 类 程序 称 为 公共 
网 关 接 口 (CGI) 程 序 ( 又 称 CGI 脚本 )。 传 统 的 CGI 程序 一 般 是 由 C 或 C++ 开发 的 ,这 些 语 
言 的 执行 速度 较 快 。 随 着 Java 程序 设计 语言 在 Web 开发 中 的 广泛 应 用 ,CGI 程序 越 来 越 
多 地 由 Java 来 实现 ,这 类 程序 即 是 Java Servlet 接口 。 


6.3.1 Java Servlet 基础 


Servlet 是 专门 为 在 Web 服务 器 上 运行 而 设计 的 Java 类 , 它 不 是 一 个 可 以 独立 运行 的 
Java 程序 ,不 能 在 操作 系统 下 直接 运行 ,必须 运行 在 Servlet 容器 中 ,由 表单 action 属性 调 
用 执行 。 从 本 质 上 讲 ,Servlet 是 一 种 符合 HTTP 通信 的 特定 程序 框架 ,是 javax. servlet 包 
和 javax. servlet. http 包 中 相关 接口 实现 类 HttpServlet 的 扩展 类 。Servlet 直接 和 间接 地 
实现 了 Servlet 接口 、ServletConfig 接口 和 Serializable 接口 的 方法 ,处 理 客户 端 发 送 的 
HTTP 请 求 ,并 对 请 求 作出 响应 , 即 向 客户 端 返回 数据 ,如 HTML 网 页 文件 。 


6.3.2 创建 Servlet 


客户 端的 一 个 表单 往往 需要 服务 端的 一 个 Servlet 相对 应 ,这 种 对 应 是 通过 设置 form 
标记 的 action 属性 指定 的 。Servlet 是 一 个 Java 类 ,负责 接收 客户 输入 和 对 数据 进行 处 理 ， 
以 及 向 用 户 浏览 器 返回 处 理 结果 。 创 建 Servlet 有 两 种 方法 : 一 种 是 定义 一 个 HttpServlet 
类 的 扩展 类 ; 另 一 种 是 使 用 MyEclipse 开发 工具 .首先 创建 一 个 Web Project, 然 后 在 New 
菜单 中 ,新 建 一 个 Servlet ,启动 新 建 Servlet 向 导 , 如 图 6-8 所 示 。 

在 新 建 Servlet 向 导 中 ,需要 输入 包 名 和 类 名 ,Java 类 文件 将 保存 在 src 中 相应 的 子 文 
件 夹 ( 包 ) 中 。 在 WebRoot\ WEB-INF\classes 中 自动 创建 与 包 名 对 应 的 子 文件 夹 ,保存 
Java 类 的 编译 结果 。 创 建 一 个 新 的 Servlet, 即 建立 一 个 Servlet 类 框架 。 创 建 Servlet 后 ， 
要 使 用 Servlet, 还 需要 对 Servlet 进行 适当 的 配置 ,以 告诉 Servlet 容器 (如 Tomcat) 如何 调 
用 需要 的 Servlet, 这 需要 对 Servlet 容器 ( 即 Tomcat) 的 web. xml 进行 配置 ,包括 声明 
servlet 和 映射 servlet。 在 servlet 类 中 ,还 需要 书写 doPost 方法 ,输出 HTML 内 容 , 以 发 送 
到 客户 端 ,在 客户 浏览 器 中 显示 处 理 结果 。 

从 上 面 Servlet 类 的 定义 和 工作 过 程 看 ,虽然 Java Servlet 实现 了 CGI 的 功能 ,但 
Servlet 的 创建 和 使 用 都 非常 麻烦 ,这 就 导致 了 一 种 Java Server Page 技术 的 出 现 。 在 JSP 
技术 中 ,可 以 直接 将 Java 代码 写 在 HTML 页 面 中 ,这 些 代码 被 包含 在 “<%” 和 “%>” 内 , 形 
成 JSP 文 件 。 对 于 JSP 页 面 中 的 代码 ,将 被 编译 成 Servlet, 大 大 减少 了 Servlet 开发 的 
难度 。 
































(a) 创建 Servelet 
图 6-8 MyEclipse 新 建 Servlet 对 话 框 
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Tha ts the display rame of my J2EE component 


Tha the deecrpacn of my DEF componert 


(b) Servlet 文 件 信息 


使 用 Servlet 开发 服务 端 中 间 层 逻辑 ,实在 是 太 复杂 了 。 为 此 ,Sun 公司 于 1999 年 推出 
JSP(Java Server Page) 技 术 , 它 具有 Servlet 功能 ,但 使 用 更 加 简单 。JSP 是 通过 在 传统 
HTML 文档 中 加 入 Java 脚本 程序 和 JSP 标记 来 构成 的 ,用 户 可 以 在 JSP 页 面 上 直接 书写 
Java 代码 ,从 而 可 以 大 大 简化 Servlet 的 使 用 。 当 用 户 浏览 JSP 网 页 时 , Tomcat 执行 JSP 
文档 中 服务 端 脚本 程序 ,然后 把 执行 结果 发 送 到 客户 端 浏 览 器 ,完成 传统 Servlet 一 样 的 


功能 。 


6.4.1 JSP 运行 与 开发 环境 


要 运行 JSP 页 面 ,在 Web 服务 器 端 ,需要 安装 Tomcat 应 用 服务 器 。Tomcat 通常 和 
Apache Web 服务 器 一 起 共同 构成 一 个 Web 服务 器 。 


1. 运行 环境 


JSP 的 运行 和 开发 环境 框架 模型 如 图 6-9 所 示 。 


客户 端 
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图 6-9 JSP 的 运行 和 开发 环境 
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因为 Java 技术 是 跨 平台 的 ,操作 系统 可 以 是 UNIX、Linux、Windows Server 等 不 同类 
型 的 操作 系统 ,如 果 和 希望 在 服务 器 上 运行 Servlet/JSP 应 用 程序 ,应 该 安装 以 下 软件 : 

(1) Java VM(JRE) ,Tomcat 需要 Java VM 的 支持 。 

(2) JDK 。 

(3) Tomcat 应 用 服务 器 。 

Tomcat 是 针对 Apache 服务 器 开发 的 JSP 应 用 服务 器 ,是 Java Servlet 和 Java Server 
Pages 技术 的 标准 实现 ,是 Servlet 和 JSP 的 容器 。 当 用 户 需 要 浏览 JSP 网 页 时 ,Apache 将 
请 求 发 送 给 Tomcat, 由 Tomcat 执行 JSP 页 面 中 的 服务 端 脚本 程序 或 Servlet ,然后 将 结果 
返 给 Apache, 由 Apache 发 送 给 客户 浏览 器 。 此 外 ,Tomcat 还 内 置 了 一 个 HTTP Server， 
也 可 以 提供 Web 服务 ,但 对 于 静态 网 页 ,其 效率 不 如 Apache。 

2. 配置 开发 环境 

如 果 使 用 MyEclipse 开发 环境 ,可 以 不 用 单独 安装 JRE、JDK 和 Tomcat, 因 为 这 些 内 容 
都 是 MyEclipse 标准 的 内 置 组 件 。 如 果 使 用 SublimeText 代码 编辑 器 编辑 JSP 网 页 ,需要 
新 建 一 个 网 站 ,安装 Tomcat、JDK 和 JRE, 以 便 测试 JSP 页 面 。 在 安装 JDK 时 需要 选择 安 
装 公共 JRE, 和 否则 在 安装 Tomcat 时 ,显示 找 不 到 JVM。 安 装 完 后 ,还 需要 进行 环境 变量 的 
配置 ,就 可 以 创建 站 点 ,测试 JSP 网 页 了 。 

为 了 测试 后 面 要 学 习 的 JSP 程序 ,我 们 继续 使 用 第 6. 1. 2 节 建 立 的 站 点 d:\haosite, 虚 
拟 目 录 为 “/mybook”"。 所 有 的 要 测试 的 JSP 页 面 ,只 要 保存 到 d:\haosite 文件 夹 中 即 可 。 
如 果 要 测试 JSP 文 档 1.jsp, 在 地 址 栏 中 输入 “http://127.0.0.1/mybook/1.jsp”。 注 意 , 必 
须要 输入 扩展 名 ,同时 要 注意 文件 名 和 目录 的 大 小 写 。 


6.4.2 JSP 语法 结构 


JSP 网 页 是 通过 在 HTML 文档 中 加 入 Java 脚本 程序 构成 的 。Java 脚本 程序 代码 用 
“<%” 和 “%>” 定 界 符 括 起 来 , 称 为 JSP 元 素 。JSP 元 素 可 以 分 为 三 种 类 型 : 指令 元 素 、 脚 本 
元 素 和 动作 元 素 。 指 令 元 素 针 对 JSP 引擎 控制 转译 后 的 Servlet 结构 ; 脚本 元 素 规范 JSP 
中 所 使 用 的 Java 代码 ; 动作 元 素 主 要 连接 用 到 的 组 件 ( 如 JavaBean 和 Plugin) ,另外 它 还 可 
以 控制 JSP 引擎 的 行为 。 

1. JSP 指令 

JSP 指令 不 直接 产生 任何 可 视 的 输出 ,只 是 指示 引擎 如 何 处 理 JSP 页 面 中 的 内 容 。JSP 
指令 由 <%@…%> 标 记 , 一 般 形式 是 : 

<%@ 指令 名 属性 , =" 属 性 值 ” 属性 : = "属性 值 ”.… 属性 , = "属性 值 ”%> 

在 书写 指令 时 ,指令 名 和 *@” 符 号 之 间 需 留 有 空格 ,常用 的 JSP 指令 是 page 指令 和 
include 指令 。 

(1) page 指令 

page 指令 (at page) 用 来 定义 整个 页 面 的 相关 属性 ,以 及 定义 网 页 的 处 理 方式 ,如 到 何 
处 寻找 Java 类 文件 等 。 指 令 语法 如 下 : 


<%@ page 
[ language = "java" ] 





[ extends = "package. class" ] 

[ import = "{package.class | package. * }, ..." ] 

[ session = "true | false" ] 

[ buffer= "none | 8kb ] 

[ autoFlush= "true | false" ] 

[ isThreadSafe= "true | false" ] 

[ info= "text" ] 

[pageEncoding= "UTF — 8|GBK|GB2312" ] 

[ contentType = "mimeType [ ;charset = < 字符 集 > ]" | 
"text/html ; charset = < 字符 集 >" ] 

[ errorPage = "relativeURL" ] 

[ isErrorPage = "true | false" ] %> 


下 面 是 page 指令 的 几 个 常用 属性 : 
。 language 属性 : 所 使 用 的 脚本 语言 。 例 如 <%@ page language 二 "Java"” %>。 
。 import 属性 : 脚本 元 素 中 使 用 的 类 与 Java 程序 中 的 import 声明 作用 相同 ,应 是 类 

的 全 名 ,或 者 类 所 在 的 包 。 例 如 : 
<%@ page import = "java. util. Date"” %> 
<%@ page import = "java. io. x* "” %> (java. io 包 中 的 所 有 类 在 本 页 中 都 可 以 使 用 ,不 会 导入 包 所 
有 的 类 ,Tomcat 会 按 需 导入 包 中 用 到 的 类 ) 
。 session 属性 ; 是 否 使 用 session 对 象 。 
buffer 属性 : 对 象 out 的 输出 模式 。none 为 没有 缓冲 区 ; 8kb 为 缓冲 区 大 小 。 
autoFlush 属性 : 缓冲 区 已 满 时 是 否 自动 清空 。 当 buffer 为 none 时 该 属性 不 能 为 false。 
isThreadSafe 属性 : 处 理 对 象 间 的 存 取 是 否 引 入 Thread Safe 机 制 。 如 果 为 true, 则 
在 程序 中 必须 有 多 线程 的 程序 代码 ,否则 直接 实现 SingleThreadModel 机 制 。 
errorPage 属性 : 设置 异常 处 理 网 页 。 
IsErrorPage 属性 : 当前 网 页 是 否 是 另 一 个 JSP 网 页 的 异常 处 理 网 页 。 
pageEncoding 属性 : 设置 JSP 文件 存储 和 读 取 所 使 用 的 编码 方式 ,默认 设置 为 ISO- 
8859-1 编码 。 
contentType 属性 : 设置 输出 到 客户 端的 MIME 类 型 和 字符 编码 方式 ,charset 指定 
服务 器 发 送 给 客户 端 时 的 内 容 编码 方式 。 对 应 于 HTML 文件 头 部 (< head >.…. 
</head >) 的 < meta http-equiv 二 "Content-Type" content="text/html; charset= 
gb2312"> 设 置 。 
在 使 用 page 指令 时 ,如 果 指 令 的 属性 较 多 ,可 以 写成 多 条 page 指令 。 几 乎 所 有 的 JSP 
页 面 都 会 用 到 page 指令 ,在 JSP 文档 的 开始 ,常常 看 到 如 下 的 page 指令 ,以 定义 网 页 的 处 
理 方 式 。 常 用 的 有 : 

<%@ page import = "java. util.Date” 名 > (导入 页 面 中 用 到 的 Java 类 ,此 处 导入 Date 类 ) 


< @ page errorPage = "errorPage.jsp” 名 >( 当 出 现 错误 时 的 错误 处 理 网 页 ) 
< 外 四 page session = "true" %> 


(2) include 指令 
在 软件 系统 开发 中 ,对 一 些 公共 的 部 分 ,可 以 抽取 出 来 写成 一 个 独立 的 网 页 。 在 其 他 网 
页 中 ,可 以 包含 该 网 页 ,这 样 不 仅 可 以 进行 代码 重用 ,提高 编程 效率 ,还 便于 系统 维护 。 在 
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JSP 网 页 中 包含 其 他 文件 的 指令 是 include 指令 ,一 般 形式 如 下 : 
<%@ include file= "被 插入 文件 的 url"”%> 


所 谓 include, 就 是 把 一 个 文件 的 全 部 内 容 插入 到 当前 文件 的 当前 位 置 。 被 包含 进 的 文 
件 必须 符合 JSP 的 语法 ,应 是 HTML 静态 文本 、 指 令 元 素 、 脚 本 元 素 和 动作 元 素 。 注 意 , 包 
含 后 面 不 能 有 分 号 。 

2. 变量 声明 

在 JSP 中 ,变量 同样 有 全 局 变量 和 局 部 变量 的 概念 。 如 果 一 个 页 面 中 包含 多 个 “<%” 
和 *“%>” 定 界 符 括 起 来 的 JSP 元 素 , 在 一 个 元 素 内 部 声明 的 变量 只 能 用 于 该 JSP 元 素 内 部 。 
如 果 和 希望 变量 声明 可 以 用 于 页 面 中 的 所 有 JSP 元 素 , 则 需要 定义 页 面 级 的 变量 ,变量 声明 
一 般 形式 如 下 : 


<%! 


类 名 变量 名 [, 变量 名 ][, 变量 名 ] …; 
%> 


在 变量 声明 中 ,可 以 为 变量 赋 初 值 ,需要 用 分 号 来 结束 变量 声明 ,同时 任何 内 容 必 须 是 
有 效 的 Java 语句 ,例如 : 

<%! 

String truename, nickname; 

String[ ] ss; 

int i=0; 

java. util. Date newsdate; 

第 > 

上 述 声明 的 变量 是 全 局 变量 ,对 在 当前 页 面 的 所 有 JSP 元 素 可 见 。 

3. 表达 式 

表达 式 是 常量 、 变 量 、 函 数 、 运 算 符 、 括 号 连接 而 成 的 式 子 。 在 程序 设计 中 ,通过 表达 式 
完成 对 数据 的 运算 ,以 及 为 变量 赋值 。 在 JSP 网 页 中 .可 以 将 表达 式 的 结果 直接 输出 到 页 
面 中 。 一 般 形 式 是 : <% 二 表达 式 %>。 例 如 : 

<% = ig> (输出 变量 工 的 值 ) 

<% = "Hello" %>( 输 出 字符 串 常 量 ) 

需要 特别 注意 的 是 "%” 和 "二 ”之 间 不 能 有 空格 。 

4. 代码 段 / 脚 本 片段 

JSP 代码 段 或 脚本 片段 包含 在 “<% … %>” 标 记 对 内 。 当 Web 服务 器 响应 请 求 时 ,这 
种 Java 代码 就 会 运行 。 在 脚本 片段 周围 可 能 是 纯粹 的 HTML 或 XML 代码 ,在 这 些 地 方 ， 
代码 片段 可 以 创建 条 件 执 行 代码 ,或 只 是 调用 另外 一 段 代码 。 

例如 ,以 下 的 代码 组 合 使 用 表达 式 和 脚本 片段 ,分 别 按照 H1、H2、H3、H4 和 H5 标题 
样式 ,显示 字符 串 “ 你 好 ”, 脚 本 片段 并 不 局 限于 一 行 源 代码 中 : 

<% for (int i=1; i<=4; i++) { %> 


<H<% =i 名 > 你 好 </H<% = i%>> 
<% } %> 


上 述 代 码 在 服务 端 由 Tomecat 执行 后 ,发 送 到 客户 端的 HTML 代码 为 : 


<HI1 > 你 好 </H1L ><H2 > 你 好 </H2 ><H3 > 你 好 </H3 >< H4 > 你 好 </H4 > 


这 可 以 通过 浏览 器 的 查看 源 代码 看 到 上 述 内 容 。 例 如 : IE 浏览 器 中 的 “查看 源 文件 ” 
命令 和 “开发 人 员工 具 ” 命 令 (F12) ,Google Chrome 浏览 器 中 的 “开发 者 工具 ”命令 (Ctrl 十 
Shift 十 了 ) 来 查看 网 页 的 内 容 和 样式 。 

5. 注释 

在 文档 中 加 入 HTML 注释 ,用 户 可 以 通过 查看 页 面 源 代码 来 看 到 这 些 注释 的 内 容 。 
如 果 不 想 让 用 户 看 到 注释 内 容 , 应 将 其 举人 到 <% 一 … 一 %> 标 记 对 中 ,一 般 形式 是 : 


<% 一 注释 内 容 -- %> 


【 例 6-4】 编写 一 个 JSP 文档 ,显示 网 页 的 访问 次 数 。 
首先 定义 一 个 统计 访问 次 数 的 文档 ,文档 名 为 mycount. jsp ,内容 如 下 : 


<%! private int accessCount = 0; 委 > 
<table width= "100% " height = "60" bgcolor = "#FFFF00"> 
<tr height = "50"> 
<tdwidth="20%" > 主机 名 : <% = request. getRemoteHost()%></td> 
<td width = "20% "> 访问 次 数 : <% = accessCount++ 多 ></td> 
<td> 当 前 时 间 : <% = new Date() %></td> 
</tr> 
</table> 


定义 一 个 JSP 页 面 ,包含 上 述 文件 ,输出 一 个 随机 数 ,mypage. jsp 文档 内 容 如 下 : 
<%(@ page import = "java. util. x*" %> 
<html > 
<body> 
<%! Random RdmNumber = new Random( ) ; %> 
<%(@ include file= "mycount. jsp" %> 
<% 
out. println(RdmNumber. nextInt(100)); // 输 出 100 以 内 的 随机 整数 
%> 
</body> 
</html > 


将 上 述 文件 保存 在 d:/haosite 文件 夹 中 ,打开 浏览 器 ,在 浏览 器 地 址 栏 中 输入 "http:// 
127. 0. 0. 1/mybook/mypage. jsp” 可 以 看 到 网 页 的 输出 结果 。 


6.4.3 数据 类 型 及 其 转换 


数据 类 型 是 一 种 编程 语言 中 非常 重要 的 语言 要 素 ,在 许多 情况 下 需要 进行 类 型 的 转换 。 
例如 ,如 果 要 将 数据 插入 到 数据 库 中 ,为 了 满足 数据 库 字段 类 型 的 需要 ,通常 需要 对 JSP 页 
面 中 的 数据 类 型 进行 转换 。 下 面 对 常 用 的 数据 类 型 及 其 转换 进行 简要 介绍 。 

1. 基本 数据 类 型 与 包装 类 

在 JSP 中 ,数据 类 型 分 为 基本 数据 类 型 和 类 两 种 形式 ,基本 数据 类 型 有 : int, 按 照 长 
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度 不 同 , 又 分 为 byte(8bit) .short(16bit) ,int(32bit) .long(64bit) 四 种 。@float ,分 为 float 
( 单 精度 ,32bit) 和 double( 双 精度 ,64bit) 。@char unicode 字符 。@boolean ,变量 取 值 为 
ture 或 false。 与 上 述 基 本 数据 类 型 对 应 的 是 类 ,分 别 是 Integer、Short、Byte、Long、Float、 
Double、Character、Boolean, 又 称 包装 类 。 

将 一 个 基本 类 型 数据 转换 为 类 对 象 , 称 为 正 向 转换 。 正 向 转换 可 以 通过 new 一 个 类 对 
象 , 调 用 构造 函数 完成 ,例如 : Integer a 二 new Integer(2); Float b 二 new Float(3. 14), 则 
a,b 不 是 简单 的 int 和 float 变量 ,而 是 两 个 对 象 ,拥有 相应 类 的 属性 和 方法 。 

将 一 个 类 对 象 转换 为 基本 类 型 数据 , 称 为 反 向 转换 。 这 可 以 调用 类 的 成 员 函 数 实现 , 例 
如 : int ia 二 a. intValue(); 其 中 a 是 一 个 Integer 对 象 。float fb 二 b. floatValue(),b 为 Float 
对 象 。 

2. 字符 串 类 型 和 整数 类 型 的 转换 

在 JSP 中 ,可 以 在 一 个 数字 字符 串 和 一 个 整数 类 型 之 间 进行 互相 转换 ,具体 方法 如 下 : 

(1) 将 字 串 String 类 型 转换 成 整数 int 类 型 

通过 Integer 类 可 以 将 字符 串 转化 为 某 种 进 制 的 整数 数据 ,一 般 形式 是 : 


int i Integer. parseInt([String]); 或 


int i = Integer. parseInt([String],[int radix]); 或 
int i = Integer. valueOf(mystr). intValue(); 


其 中 ,最 后 一 种 转换 是 将 一 个 数字 字符 串 转化 成 一 个 Integer 对 象 ,然后 再 调用 这 个 对 
象 的 intValue( ) 方 法 返回 其 对 应 的 int 数值 。 

(2) 将 整数 int 类 型 数据 转换 成 数字 字 串 String 类 型 数据 

一 般 形式 是 : 

String s = String.valueOf(i); 或 

String s = Integer.toString(i); 或 

Strings = "" + i; 

对 于 字符 串 类 型 和 Double、Float、Long 类 型 数据 之 间 的 转换 方法 大 同 小 异 ,例如 : 

long ln 一 java. lang. Long. parseFloat("123.5"); ,或 float f= Float. valueOf("123. 5"). 
floatValue() 。 详 细 介绍 略 。 

3. 字符 串 类 型 和 日 期 型 数据 的 转换 

在 数据 库 中 ,通常 有 Datetime 类 型 的 数据 字段 。 在 MySQL 或 MS SQL 中 ,可 以 直接 
把 字符 串 插入 日 期 类 型 的 列 中 ,SQL 会 隐 式 做 格式 转换 ,将 字符 串 类 型 转 为 日 期 类 型 。 但 
是 ,字符 串 的 格式 必须 是 yyyy-mm-dd 或 yyyymmdd 形式 ,例如 2008-12-10 或 20081210 。 

如 果 从 数据 库 中 读 取 一 个 Datetime 类 型 的 数据 字段 .例如 dateadd, 可 以 有 不 同 的 读 取 
方式 ,包括 getString("dateadd" ) getDate("dateadd" ) 等 ,前 者 返回 一 个 String 数据 ,后 者 
返回 一 个 Date() 类 型 的 数据 。 

在 JSP 中 ,也 可 以 将 字符 串 转换 成 Date 类 型 ,例如 : 


String strDate = '03/16/2012'; 
java. util.Date mydate = new SimpleDateFormat("dd/MM/YYYY") .parse(strDate ) 


即 可 得 到 对 应 的 日 期 数据 。 


4. 字符 串 类 型 和 字符 串 数 组 类 型 的 转换 
在 JSP 页 面 中 ,一 种 常用 的 操作 就 是 将 一 个 字符 串 拆 分 成 一 个 字符 串 数组 ,或 者 将 一 
个 字符 串 数 组 合并 成 一 个 字符 串 。 例 如 ,将 字符 串 "aa, bb,cc" 转 换 成 Vector 数据 类 型 ,分 
别 包 含 三 个 字符 串 元 素 "aa"、"bb"、"cc" 。 代 码 如 下 : 
String strData= "aa, bb,cc"; 
String strList[ ] = new String[ 20]; 
strList = strData. split(","); 
上 述 操作 可 以 间接 地 实现 对 字符 串 数组 的 赋 初 值 。 
在 Web 开发 中 ,用 作 字 符 串 分 隔 符 的 字符 可 能 会 是 字符 串 本 身 数 据 的 一 个 字符 ,因此 
在 实际 编程 时 ,如 何 选取 字符 串 分 隔 符 非常 重要 。 根 据 开 发 经 验 , 我 们 通常 使 用 两 个 不 可 打 
印 的 字符 ”\102 和 ”\20" 作 为 分 隔 符 , 因 为 这 两 个 字符 用 户 很 少 直接 输入 ,不 太 可 能 是 字符 串 
本 身 的 数据 。 例 如 ,在 下 面 的 示例 代码 中 ,字符 串 ss 中 ,定义 了 2 级 字符 串 的 分 隔 结构 ,分 
别 存 储 了 一 组 超 链 接 的 显示 文本 和 文件 路 径 。 
<% 
String f1="\10"; 
String f2 = "\20"; 
String ss; 
String[ ] s1, s2; 
if (ss. length( )>0) 
{ 
sl= ss.split(f1); 
for(int k= 0;k<sl.length;k++) 
{ 
s2= sl[k]. split(f2); 
out. print("<a href = '" + s2[1] + "'>" + s2[0] +"</a><br>"); 
上 
} 


注意 ,在 上 述 代 码 中 , 求 字 符 串 的 长 度 和 字符 数组 的 长 度 使 用 的 方法 不 同 。 如 果 最 后 一 
个 分 隔 符 后 面 没有 内 容 , 即 字符 串 ss 的 最 后 一 个 字符 是 分 隔 符 全, 则 分 隔 后 的 数组 将 不 会 
包含 一 个 空 元 素 。 

对 于 字符 串 对 象 的 操作 ,在 编程 时 注意 以 下 两 个 常用 操作 的 使 用 : equals() 方 法 , 字 
符 串 比较 运算 ,使 用 时 一 般 需 要 将 字符 串 常 量 放 在 前 面 :变量 放 在 方法 内 ,这 样 当 变量 值 为 
null 时 不 会 产生 异常 。 例 如 "a". equals(str) ,str 为 null 时 ,不 会 报错 。 执 行 str. equals("a"), 当 
str 为 null 时 ,程序 将 发 生 异 常 而 报错 。@trim() ,字符 串 截 尾 函 数 ,对 于 一 个 取 值 为 null 的 
String 对 象 进行 trim() 操 作 , 将 发 生 异 常 . 输 出 null, 因 此 在 操作 前 应 该 使 用 if (str! 二 null) 
str 一 str.trim() 。 

5. 数组 类 型 和 集合 类 

无 论 是 什么 样 的 程序 设计 ,数组 (Array) 都 是 一 种 常用 的 数据 类 型 。 与 上 述 简单 数组 
类 型 相 比 ,Java 中 还 提供 了 Vector、ArrayList 集合 类 。 集 合 类 和 数组 不 同 , 当 数组 中 元 素 
的 个 数 不 确 定时 ,可 以 使 用 java. util. Vector 类 .例如 : 


Vector v = new Vector(); 
for (int i=0; i<strList. length; i++) 
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v.add (strList[i]); 


return v; 


与 Array 数组 相 比 ,Vector 集合 只 能 存放 java. lang. object 对 象 ,不 能 用 于 存放 基本 类 
型 数据 。 例 如 ,要 存放 一 个 整数 10 ,得 用 new Integer(10) 构 造 出 一 个 Integer 包装 类 对 象 ， 
才能 ADD 到 Vector 集合 中 。 与 Array 相同 的 是 集合 也 通过 元 素 的 整数 索引 来 访问 
Vector 元 素 ,调用 Vector 的 size() 方 法 时 ,可 以 返回 Vector 集合 中 实际 元 素 的 个 数 。 

在 Java 中 , Vector 类 和 ArrayList 类 具有 相似 的 功能 。 从 内 部 实现 机 制 来 讲 ， 
ArrayList 和 Vector 都 是 使 用 数组 来 控制 集合 中 的 对 象 , 当 从 一 个 指定 的 位 置 (通过 索引 ) 
查找 数据 或 是 在 集合 的 末尾 增加 、 移 除 一 个 元 素 时 ,两 者 所 花费 的 时 间 相 同 。 

但 是 ,从 同步 的 角度 讲 ,Vector 是 同步 的 , 它 的 一 些 方法 保证 了 Vector 中 的 对 象 是 线程 
安全 的 。ArrayList 则 是 异步 的 ,因此 ArrayList 中 的 对 象 并 不 是 线程 安全 的 。 因 为 同步 的 
要 求 会 影响 执行 的 效率 ,所 以 如 果 不 需要 线程 安全 的 集合 那么 使 用 ArrayList 是 一 个 很 好 
的 选择 ,这 样 可 以 避免 由 于 同步 带 来 的 不 必要 的 性 能 开销 。 

可 见 , 如 果 仅 仅 是 作为 数组 存储 数据 ,应 该 选择 使 用 简单 数组 ,使 用 一 个 简单 的 数组 
(Array) 来 代替 Vector 或 ArrayList。 尤 其 是 对 于 执行 效率 要 求 高 的 程序 更 应 如 此 。 因 为 
使 用 数组 避免 了 同步 ,额外 的 方法 调用 和 不 必要 的 重新 分 配 空间 所 带 来 的 消耗 。 


6.4.4 JSP 内 置 对 象 


内 置 对 象 是 由 语言 或 运行 环境 所 定义 的 具有 特定 功能 的 对 象 ,用 户 可 以 直接 使 用 。 在 
JSP 脚本 段 中 ,可 以 访问 这 些 隐 含 对 象 来 与 JSP 网 页 中 的 可 执行 Servlet 环境 交互 。JSP 中 
包含 了 一 系列 的 内 置 对 象 , 常 用 的 内 置 对 象 介绍 如 下 。 

1. request 对 象 

在 JSP 中 ,内 置 对 象 request 是 javax. servlet. HttpServletRequest 类 的 一 个 子 类 对 象 ， 
当 客 户 端 请 求 一 个 JSP 页 面 时 ,JSP 容器 (Tomcat) 会 将 客户 端的 请 求 信息 及 HTTP 头 封 装 
在 request 对 象 中 ,request 对 象 常用 方法 见 表 6-2 。 

表 6-2 request 对 象 常用 方法 列表 
方 法 说 明 

获得 HTTP 协议 定义 的 文件 头 的 值 








getHeader(String name) 





getHeaders(String name) 


获得 一 个 HTTP 请 求 头 的 所 有 值 





getRemoteAddr() 


获取 客户 端的 IP 地 址 





getRemoteHost() 


获得 客户 端的 主机 名 , 若 该 方法 失败 , 则 返回 客户 端 计算 机 的 IP 地 址 





getRequestURL() 


获得 客户 端 请 求 的 URL 





getRequestURI() 


获得 客户 端 请 求 的 URI 





getMethod() 


获得 请 求 方法 (GET 或 POST) 





getParameter(String name) 


返回 客户 端 传送 某 个 请 求 参 数 的 值 ,或 者 是 表单 数据 。name 指定 
传递 的 参数 名 或 表单 的 输入 域名 





getParameter Names() 


获取 客户 端 传 来 的 所 有 参数 的 名 字 , 返 回 值 为 Enumeration 类 实例 





getParameter Values(String name) 


获取 客户 端 中 参数 名 为 name 的 所 有 值 





getCookies() 


返回 客户 端的 Cookies 对 象 ,结果 是 一 个 Cookie 数组 





getQueryString() 





返回 查询 字符 串 ,该 字符 串 由 客户 端 以 GET 方法 向 服务 器 端 传送 。 
查询 字符 串 出 现在 页 面 请求 *?” 的 后 面 


通过 request 对 象 可 以 获取 用 户 访问 网 页 时 传人 的 参数 值 或 表单 中 的 输入 ,例如 ,在 网 
页 a. htm 中 包含 一 个 表单 ,其 < form > 的 action 属性 指定 表单 处 理 页 面 为 b. jsp, 在 b.jsp 
中 ,可 以 通过 request. getParameter 方法 来 获取 a. htm 中 的 表单 输入 数据 。 

要 获取 一 个 网 页 的 userName 参数 的 值 ,代码 如 下 : 


<% String name = request. getParameter("userName"); out.println(name); %> 


需要 说 明 的 是 ,HTTP 传输 默认 的 编码 是 ISO-8859-1, 因 此 在 浏览 器 发 出 请 求 时 给 出 
的 URL 是 编码 后 的 字符 串 ,这样 当 有 中 文 时 ,服务 器 得 到 的 是 一 个 包含 乱码 的 URL 字符 
串 ,在 目标 页 面 中 要 得 到 正确 的 中 文 数据 ,需要 进行 代码 转换 ( 转 码 ) 。 

中 文字 符 编码 转换 函数 如 下 : 


<%! 
public String codeToString(String str) 
{ // 中 文字 符 串 数据 编码 转换 函数 
String s= str; 
try { 
byte tempB[ ] = s. getBytes("ISO— 8859— 1"); 
s = new String(tempB); 
return s; 
} 
catch(Exception e) { 
return s; 
} 
} 


%> 


这 样 就 可 以 将 得 到 的 中 文 数据 转换 为 正常 的 中 文 编码 了 ,例如 : 


<% 

String msgtitle = codeToString(request. getParameter("msgtitle")); 
String msgcontent = codeToString( request. getParameter ("msgcontent")); 
%> 


为 了 使 用 方便 ,可 以 将 上 述 编码 转换 函数 定义 为 一 个 JavaBean, 然 后 再 通过 在 JSP 页 
面 中 导入 即 可 使 用 。 
2. response 对 象 
在 JSP 中 .response 对 象 是 一 个 javax. servlet. HttpServletResponse 类 的 实例 ,封装 了 
服务 器 相应 客户 请 求 的 信息 。response 对 象 的 作用 是 向 客户 端 返回 请 求 , 即 给 客户 端 传送 
输出 信息 ,设置 表 头 等 。 常 用 的 方法 见 表 6-3。 
表 6-3 response 对 象 常用 方法 列表 





方法 说 明 
重新 设 定 传 回 网 页 的 文件 格式 和 编码 方式 。 常 用 的 文件 格式 有 : 
setContentType(String s) text/html,text/plain( 文 本 文件 ) ,application/x-msexcel(Excel 文件 ) 


和 applicaiton/word(Word 文件 ) 
添加 HTTP 头 , 该 Header 将 会 传 到 客户 端 ,如 果 有 同名 的 Header 
存在 ,原先 的 Header 会 被 覆盖 





addHeader(String name，String value) 
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续 表 
方 法 说 明 
setHeader(String name，String value)| 设 定 指定 名 字 的 HTTP 头 的 值 , 如 果 该 值 存在 , 它 将 会 被 新 的 值 覆 盖 
addCookie(Cookie c) 添加 一 个 Cookie 对 象 
setStutus(int n) 设置 HTTP 链接 中 的 服务 端 响应 的 状态 码 
sendError(int sc) 传送 状态 码 
sendError(int sc, String msg) 传送 状态 码 和 错误 信息 
sendRedirect(URL url) 页 面 重 定 向 ,将 客户 端 重新 定向 到 URL 所 指向 的 页 面 


使 用 response 对 象 可 以 设置 客户 端的 页 面 跳 转 ,页 面 自 动 刷新 ,页 面 自动 跳 转 等 ,示例 
代码 如 下 : 


<% 





response. setHeader("Refresh", "5;URL= http://www. baidu. com" ); 
response. sendRedirect("a. jsp"); // 重 定位 到 a.jsp 页面 

先 > 

上 述 代码 可 以 使 得 客户 端 在 5 秒 钟 后 重新 自动 跳 转 到 一 个 新 的 网 址 ,或 直接 重新 定位 
到 一 个 新 的 页 面 。 

需要 说 明 的 是 ,在 sendRedirec() 方 法 中 ,如 果 重 新 定位 的 网 址 中 含有 参数 ,参数 值 为 中 
文 的 话 ,例如 : response. sendRedirect("b. jsp? teachername 一 张 三 &page 二 1"); 在 重新 定 
位 的 页 面 b.jsp 中 ,不 能 正确 获得 teachername 参数 的 值 。 

3。session 对 象 

所 谓 会 话 (Session) ,是 指 一 个 用 户 和 Web 服务 器 之 间 的 一 次 链接 。 当 用 户 使 用 浏览 
器 登录 到 Web 服务 器 、 并 初次 浏览 一 个 JSP 应 用 的 某 个 网 页 开始 、 直 到 用 户 离开 网 站 或 超 
时 未 继续 浏览 该 网 站 网 页 为 止 ,之 间 的 浏览 操作 算 作 一 次 会 话 。 

会 话 对 象 session 是 JSP 为 每 一 个 会 话 而 建立 的 个 人 对 象 ,可 以 存储 及 提供 个 别 用 户 独 享 
的 永久 或 半 永 久 信息 。 它 是 一 个 与 request 相关 的 javax. servlet. http. HttpServletSession 对 
象 。 当 一 个 用 户 首次 访问 服务 器 上 的 一 个 JSP 页 面 时 ,JSP 引擎 产生 一 个 Session 对 象 , 同 
时 分 配 一 个 String 类 型 的 ID 号 ,JSP 引擎 同时 将 这 个 ID 号 发 送 到 用 户 端 ,存放 在 Cookie 
中 ,这 样 session 对 象 和 用 户 之 间 就 建立 起 一 一 对 应 的 关系 。 当 用 户 再 次 访问 连接 该 服务 器 
的 其 他 页 面 时 ,不 再 为 用 户 分 配 新 的 session 对 象 。 当 用 户 关闭 浏览 器 时 ,服务 器 端 保存 的 
该 用 户 的 session 对 象 被 取消 ,服务 器 和 用 户 的 对 应 关系 也 被 取消 。 如 果 用 户 重新 打开 浏览 
器 再 连接 到 该 服务 器 时 ,服务 器 为 用 户 再 创建 一 个 新 的 Session 对 象 。 

会 话 对 象 session 常用 方法 见 表 6-4。 

表 6-4 ， session 对 象 常用 方法 列表 
方 法 说 明 
setAttribute(String name, value) 在 session 对 象 中 设置 属性 name, 并 为 该 属性 赋值 

获取 session 对 象 指定 属性 的 值 ,如 果 该 属性 不 存在 ,将 会 返 
回 null 
removeAttribute( String name) 删除 指定 属性 的 属性 名 和 属性 值 








getAttribute(String name) 











方 法 说 明 


续 表 





getCreationTime() 返回 session 对 象 被 创建 的 时 间 ,单位 为 毫秒 





返回 session 对 象 在 服务 器 端的 编号 。 每 生成 一 个 session 对 
象 , 服 务 器 都 会 给 它 一 个 编号 ,编号 不 会 重复 ,服务 器 根据 编号 








Se 来 识别 session, 并 且 正 确 地 处 理 某 一 特定 的 session 及 其 提供 的 
服务 

getLastAccessedTime() 返回 当前 session 对 象 最 后 一 次 被 操作 的 时 间 ,单位 为 毫秒 

getMaxInactiveInterval () 获取 session 对 象 的 生存 时 间 , 单 位 为 秒 





setMaxJInactiveInterval (int interval) 





设置 session 对 象 的 有 效 时 间 ( 超 时 时 间 ) ,单位 为 秒 。 具 体 值 应 


根据 网 站 的 实际 应 用 情况 决定 ,设置 几 十 分 钟 是 很 正常 的 


【 例 6-5】 编写 一 个 JSP 页 面 , 当 用 户 访问 站 点 时 ,检查 是 否 通 过 登录 页 面 正常 登录 。 
如 果 正 常 登录 则 在 seesion 对 象 中 添加 属性 useraccount ,否则 ,显示 一 个 错误 页 面 ,然后 强 


行 跳 转 到 站 点 登录 页 面 。 


分 析 : 根据 Web 的 原理 ,要 访问 一 个 页 面 ,只 要 输入 页 面 对 应 的 URL 即 可 ,为 避免 用 
户 任意 地 访问 页 面 ,Web 系统 通常 要 求 用 户 登录 ,按照 系统 提示 访问 。 下 面 是 一 个 控制 页 


面 合法 访问 的 JSP, 文 件 名 为 session-confirm. jsp, 代 码 清 单 如 下 : 


<%@ page pageEncoding = "GBK" %> 
<% 
String useraccount = (String)session. getAttribute( "useraccount"); 
if (useraccount == null) { 

// 销 毁 当 前 session 

session. invalidate( ); 
竺 > 
<html > 
<head > 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 
</head > 
<body oncontextmenu = "self.event.returnValue = false" scroll = no> 
<table width= "500" border = "1" > 
<tr><td> 操 作 发 生 错误 ,错误 的 原因 可 能 是 </td></tr> 
<tr> 
<td> 

<ul> 

< li> 未 进行 正常 登录 </1i> 
<1i> 系 统 连接 超时 </1i> 

</ul> 
</td> 
</tr> 
<table> 
</body> 
</html > 
<% 

// 可 直接 重 定向 到 Web 应 用 的 首页 

//response. sendRedirect(request. getContextPath() + "/index. jsp"); 
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} //end if 
%> 
在 其 他 网 页 中 ,可 以 包含 该 页 面 ,这 样 就 可 以 保证 页 面 不 能 被 直接 访问 了 。 
4. application 对 象 
该 对 象 可 存储 并 提供 给 一 组 JSP 应 用 所 有 用 户 的 共享 信息 ,有 效 范围 为 构成 该 JSP 应 
用 的 所 有 JSP 页 面 ,可 以 实现 不 同 页 面 之 间 的 数据 共享 。 一般 情况 下 ,可 以 将 application 
对 象 作为 一 个 存储 许多 共用 对 象 的 容器 , 它 是 一 个 javax. servlet. ServletContext 对 象 。 
application 对 象 常用 方法 见 表 6-5。 
表 6-5 application 对 象 常用 方法 列表 
者 .小 说 明 
void setAttribute (String key，| 将 参数 obj 对 象 添 加 到 application 对 象 中 ,并 为 添加 的 对 象 指定 索引 
Object obj) 关键 宇 key 
获取 application 对 象 中 含有 关键 字 key 的 对 象 。 由 于 任何 对 象 都 可 
Object getAttribute(String key) | 以 添加 到 application 对 象 中 ,因此 用 该 方法 取 回 对 象 时 ,应 强制 转化 

















为 原来 的 类 型 
removeAttribute(String key) 从 当前 application 对 象 中 删除 关键 字 是 key 的 对 象 
String getservletInfo() 获取 servlet 编译 器 的 当前 版 本 的 信息 


使 用 application 对 象 , 可 以 让 多 个 JSP .Servlet 共享 数据 。 例 如 ,有 两 个 JSP 页 面 a.jsp 
和 b.jsp。 在 页 面 a.jsp 中 包含 如 下 代码 : 


<%(@ page contentType = "text/htm1; charset = GBK" %> 
<% 

String str = "你 好 "; 

application. setAttribute("greeting", str); 
%> 


在 另 一 个 页 面 b.jsp 中 可 以 访问 application 对 象 的 属性 ,代码 如 下 : 


<g% @ page contentType = "text/htm1; charset = GBK" %> 
<% 
String str; 
str = (String)application. getAttribute("greeting"); 
out. print( str); 
对 > 


此 外 ,使 用 application 对 象 ,还 可 以 获得 Web 应 用 配置 参数 。 在 JSP 页 面 中 ,访问 数据 
库 所 使 用 的 驱动 `、URL,. 用 户 名 、 密 码 可 以 写 在 网 站 配置 文件 web. xml 中 ,例如 : 下 面 是 一 
个 web. xml 数据 ,代码 清单 如 下 : 


<context - param> 
<param— name > driver </param - name> 
< param - value > com. mysql. jdbc. Driver </param ~ value> 
</context - param> 
<context ~ param> 
< param — name > Url </param - name > 
<param— value > jdbc:mysql://localhost:3306/javaee </param - value> 


</context - param > 
<context ~ param > 
< param — name > user </param - name > 
<param— value > root </param — value> 
</context - param > 
<context ~ param> 
< param— name > pass </param - name > 
< param— value > root </param - value> 
</context - param > 


通过 这 种 方式 ,将 配置 信息 放 在 web. xml 文件 中 进行 配置 ,避免 使 用 程序 编码 方式 写 
在 代码 中 ,可 以 更 好 地 提高 程序 的 移植 性 。 在 操作 数据 库 时 ,通过 application 对 象 ,可 以 获 
得 这 些 参数 的 配置 情况 。 

【 例 6-6】 编写 JSP 页面, 获取 Web 系统 的 数据 库 具体 配置 信息 ,并 输出 一 个 数据 
库 表 。 

分 析 : 数据 库 的 配置 信息 可 以 通过 Web 站 点 的 web. xml 进行 配置 ,该 配置 信息 通过 
JSP 的 内 置 对 象 application 获取 。 代 码 清单 如 下 : 


<%@ page language = "java" import = "java.util. *" pageEncoding = "GBK" %> 
< 外 四 page import = "java. sql. *"%> 
<% 
// 从 配置 参数 中 获取 驱动 
String driver = application. getInitParameter("driver"); 
// 获 取 数 据 库 URL 
String url = application.getInitParameter("url"); 
// 获 取 用 户 名 和 密码 
String user = application.getInitParameter("user"); 
String pass = application. getInitParameter("pass"); 
// 注 册 驱 动 
Class. forName( driver); 
// 获 取 数 据 库 连接 
Connection conn = DriverManager. getConnection(url, user,pass); 
// 创 建 Statement 对 象 
Statement stmt = conn.createStatement(); 
// 执 行 查询 
ResultSet rs = stmt.executeQuery("SELECT x FROM newsinfo"); 
%> 
<table bgcolor = "9999dd" border = "1" align = "center"> 
<% 
// 遍 历 结 果 集 
while(rs.next()) { 
第 > 

<tr > 

<td><% =rs.getString(1) %></td> 
<td><% =rs.getString(2) %></td> 

</tr> 
<% 
下 
%> 
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</table> 


对 于 application 对 象 , 当 站 点 服务 器 开启 的 时 候 ,application 对 象 就 被 创建 ,直到 网 站 
关闭 。 因 此 ,application 对 象 可 能 持续 地 存在 几 个 月 甚至 更 长 的 时 间 , 可 以 用 于 实现 站 点 访 
问 计数 器 等 功能 。 例 如 ,在 站 点 首页 中 增加 下 述 代 码 : 

<% 

Integer number = (Integer)application. getAttribute("Count" ); 
if (number ==null) { 
number = new Integer(1) 
application. setAttribute("Count", number); 
} 
else { 
number = new Integer(number. intValue() + 1); 
application. setAttribute("Count", number); 


您 是 第 <% = (Integer)application. getRttribute("Count" ) %$> 位 访问 者 . 

5. out 对 象 

发 送 输出 流 , 作 用 是 将 结果 输出 到 网 页 。 它 最 常用 的 方法 有 两 个 : print() 和 println()。 
输出 换行 符 使 用 newLine( ) 方 法 。 

例如 : 不 用 表达 式 , 可 以 直接 访问 隐 含 对 象 out 来 输出 信息 。 


<% out. println("< hl align= center > Hello </hl >"); %> 


通常 情况 下 ,使 用 out. print() 可 以 输出 HTML 代码 ,以 动态 地 构造 HTML 页 面 内 容 ， 
如 生成 各 种 表格 等 ,这 些 输出 最 终 发 送 到 客户 端 浏 览 器 。 

6. 其 他 对 象 

在 JSP 中 ,内 置 对 象 还 有 : config 对 象 ,用 于 传递 在 Servlet 程序 初始 化 时 所 需 的 信 
息 。@pageContext 对 象 , 该 对 象 提供 了 对 页 面 上 的 所 有 对 象 以 及 命名 空间 的 访问 ,用 于 管 
理 网 页 属性 。@page 对 象 ,当前 页 面 ,相当 于 Java 中 的 this。@exception 对 象 ,错误 处 理 
对 象 ,用 于 处 理 捕捉 到 的 异常 。 

【 例 6-7】 编写 一 个 JSP 文档 ,完成 一 个 登录 界面 ,输入 用 户 名 和 和 密码, 如果 输入 guest 
则 转移 到 一 个 默认 的 首页 ,如 果 不 输入 用 户 名 , 则 重新 回 到 该 页 ,直到 输入 正确 的 用 户 名 和 
密码 ,此 时 重 定向 到 注册 用 户 网 页 。 

分 析 : 在 一 个 JSP 中 ,包含 表单 ,表单 的 action 属性 可 以 指定 执行 页 面 本 身 ,这 样 可 以 
实现 一 些 特殊 的 效果 。 登 录 页 面 ( 文 档 名 login.jsp) 代 码 清单 如 下 : 


<%@ page contentType = "text/html;charset = gb2312" %> 


<html> 
<body> 
<% 
String userName = request.getParameter("userName"); 
if (userName!= null && !"".equals(userName)) 

response. sendRedirect("http://gsl. sdu. edu. cn/"); 
对 > 


< form name = "forml" method= "post" action= "login. jsp" > 


<table width= "300" border = "1" align = "center"> 
<tr height = "50"> 
< td align = "center"> 用 户 登 录 </td> 

</tr> 
<tr height = "35"> 

<td style= "font- size:13"> 用 户 名 : < input type = "text" name = "userName"></td> 
wt 
<tr height = "35"> 

<td style= "font — size:13"> 密 &nbsp; &nbsp; 码 : < input type = "text" name = "userPassword"> 
</td> 
</tr> 
<tr height = "40"> 

<td align = center >< input type = "submit"” value = "登录 "></td> 
</tr> 
</table> 
</form> 
</body> 
</html > 


将 文件 保存 到 d: \haosite 文件 夹 中 ,在 浏览 器 地 址 栏 输入 该 网 页 的 网 址 : http:// 
127.0. 0. 1/mybook/Vlogin. jsp, 即 可 调用 显示 。 页 面 的 执行 情况 分 析 如 下 : 

第 一 次 执行 该 文档 时 ,由 于 URL 中 没有 设置 userName, 并 且 表 单 尚未 生成 ,所 以 在 开 
始 处 的 JSP 段 ,执行 userName 三 request. getParameter("userName") 时 ,参数 userName 
不 存在 ,此 时 会 返回 null( 空 和 字符 串 “null" 不 同 ), 此 时 ,后 面 的 页 面 重 定位 没有 执行 ,接着 
会 显示 后 面 的 HTML 代码 ,显示 登录 表单 。 

当 登 录 表单 显示 后 ,如 果 此 时 没有 输入 用 户 名 ,直接 单 击 “ 登 录 ” 按 钮 ,表单 提交 ,执行 
action 设置 中 设置 的 页 面 login. jsp, 即 本 页 面 本 身 。 此 时 表单 已 经 存在 , 即 userName 输入 
域 已 经 存在 ,此 时 在 开始 处 的 JSP 代码 段 , 读 取 的 userName 不 再 是 null, 而 是 空 字符 ("")， 
即 userName 此 时 为 空 字符 , 即 "". equals(CuserName) 条 件 为 真 。 

【 例 6-8】 编写 JSP 代码 ,显示 站 点 的 在 线 人 数 。 

分 析 : 显示 在 线 人 数 的 方法 很 多 ,前 面 我 们 看 到 用 application 对 象 可 以 显示 站 点 的 访 
问 人 数 。 对 于 在 线 人 数 , 利 用 session 对 象 的 数量 可 以 获取 准确 的 在 线 人 数 。 因 此 ,我 们 可 
以 编写 一 个 类 来 对 session 的 创建 和 注销 进行 记录 ,从 而 得 到 在 线 人 数 的 数据 。 

首先 编写 一 个 统计 会 话 人 数 的 Java 类 ,代码 清单 如 下 (文档 名 SessionCounter. java): 

package pub; 

import javax. servlet. x*; 

import javax. servlet. http. *; 

public class SessionCounter implements HttpSessionListener 

private static int activeSessions = 0; 

public void sessionCreated(HttpSessionEvent se) { 


activeSessionst++; 


|, 
public void sessionDestroyed(HttpSessionEvent se) { 
if (activeSessions > 0) 


activeSessions ——; 
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public static int getActiveSessions() { 
return activeSessions; 
} 
} 


将 上 述 Java 类 文件 存储 在 Web 应 用 的 用 户 自 定义 类 文件 夹 classes 中 的 pub 子 文件 
夹 ( 即 pub 包 ) 中 , 即 存储 到 d:\haosite\WEB 一 INF\classes\pub 中 ,然后 编译 该 文件 。 

编写 调用 该 SessionCounter. java 的 JSP 文档 ,文档 名 myonline. jsp, 内 容 如 下 : 

<%@ page import = "pub. SessionCounter" %> 

< html > 

<head > 

<meta http - equiv= "refresh" content = "60"> 

</head> 

<body> 

在 线 人 数 : <% = SessionCounter. getActiveSessions() %> 

</body > 

</html > 


最 后 ,修改 d:\haosite\WEB-INF\web. xml 配置 文件 ,在 < web-app >...</web-app > 元 
素 内 ,添加 如 下 内 容 : 

<! -- Listeners -一 > 
<1istener > 

<listener - class> 

pub. SessionCounter 

</listener - class> 

</listener > 


6.4.5 JavaBean 


在 JSP 页 面 中 ,直接 书写 Java 代码 ,虽然 方便 ,但 不 便于 代码 的 重用 ,增加 了 系统 维护 
的 难度 。 从 软件 结构 设计 的 角度 ,将 那些 功能 相对 独立 .具有 共性 的 代码 封装 成 类 ,可 以 更 
好 地 提高 系统 开发 的 效率 ,增强 系统 的 可 维护 性 ,这 就 是 JavaBean 的 思想 。 由 于 CGI/ 
Servlet 开发 的 复杂 性 ,JavaBean 已 经 成 为 Web 后 端 开发 的 重要 手段 。 

1. JavaBean 的 概念 

什么 是 JavaBean 呢 ? 按照 Sun 公司 的 定义 ,JavaBean 是 一 个 可 重复 使 用 的 软件 组 件 。 
实际 上 JavaBean 就 是 一 种 Java 类 ,通过 封装 属性 和 方法 成 为 具有 某 种 功能 或 者 处 理 某 个 
业务 的 对 象 ,简称 Bean。 因 为 ,JavaBean 是 在 服务 端 由 容器 (如 Tomcat) 创 建 的 ,因此 ,作为 
JavaBean 的 Java 类 应 该 是 具体 的 ` 公 共 的 .具有 无 参 构造 器 等 特征 。JavaBean 通常 用 于 
JSP 页 面 中 ,以 便于 实施 软件 重用 。 

使 用 JavaBean 的 概念 ,用 户 可 以 将 功能 、 处 理 \ 值 数据 库 访问 和 其 他 任何 可 以 用 Java 
代码 创建 的 对 象 封装 成 JavaBean, 然 后 ,开发 者 可 以 在 JSP 页 面 \.Servlet、 其 他 JavaBean 中 
使 用 这 些 对 象 。 在 这 里 ,JavaBean 就 相当 于 一 个 用 户 开发 的 类 库 。 

从 功能 上 分 ,JavaBean 可 分 为 有 用 户 界面 的 JavaBean 和 没有 用 户 界 面 的 JavaBean 两 


种 ,其 中 ,后 者 主要 负责 后 端的 事务 处 理 , 例 如 : 数据 运算 、 操 纵 数据 库 等 。 在 JSP 页 面 中 ， 
后 一 种 JavaBean 应 用 得 较 多 。 

2. JavaBean 和 Java 类 

JavaBean 描述 了 Java 开发 中 软件 重用 的 概念 ,并 没有 严格 的 定义 规范 ,这 和 
JavaServlet 不 同 。JavaServlet 是 接口 的 实现 ,一 个 Servlet 必须 实现 特定 的 接口 方法 ,以 便 
于 Tomcat 容器 调用 。 对 于 一 个 非 可 视 化 的 JavaBean 没有 必须 继承 的 特定 的 基 类 或 接口 ， 
可 视 化 的 Bean 必须 继承 的 类 是 java. awt. Component, 以 便于 添加 到 可 视 化 容器 中 去 。 

理论 上 讲 , 任 何 一 个 Java 类 都 可 以 是 一 个 JavaBean。 但 通常 情况 下 ,由 于 JavaBean 是 
被 容器 (如 Tomcat) 所 创建 的 ,所 以 JavaBean 应 具有 一 个 无 参 构造 函数 ,日 JavaBean 都 应 
是 public 类 ,成 员 函 数 也 要 是 public 型 的 ,以 便于 外 部 访问 。 

在 使 用 Java 编程 时 ,并 不 是 所 有 软件 模块 都 需要 转换 成 JavaBean。jJavaBean 比较 适合 
于 那些 具有 可 视 化 操作 和 定制 特性 的 软件 组 件 , 其 目的 是 为 了 软件 重用 。 从 重用 的 角度 看 ， 
一 个 JavaBean 需要 公开 三 类 接口 : JavaBean 可 以 调用 的 方法 ; @JavaBean 提供 的 可 读 
写 的 属性 ; @JavaBean 向 外 部 发 送 的 或 从 外 部 接收 的 事件 。 只 要 公布 了 上 述 三 个 方面 的 特 
征 , 它 就 可 以 在 其 他 地 方 调用 了 ,这 也 构成 了 开发 JavaBean 的 框架 。 

在 创建 JavaBean 时 ,对 属性 和 方法 没有 特别 的 要 求 , 就 是 和 普通 的 Java 类 一 样 。 可 能 
的 一 点 就 是 JavaBean 类 方法 的 命名 上 有 一 些 习 惯 ,例如 : 有 一 个 私有 属性 xval, 往 往 会 对 
应 两 个 公有 的 方法 getXval() 和 setXval() 用 以 读 取 属 性 xval 的 值 或 为 其 复制 ,这 种 命名 的 
可 读 性 好 ,但 不 是 必须 的 。 

3. 使 用 JavaBean 

JavaBean 主要 应 用 于 JSP 网 页 中 ,通过 JavaBean 可 以 更 好 地 将 业务 逻辑 代码 和 JSP 
的 HTML 标记 进行 分 离 , 便 于 系统 的 维护 。 在 JSP 网 页 中 使 用 JavaBean, 通常 有 两 种 
方法 : 

(1) 使 用 < jsp:useBean > 标记 符 访问 JavaBean 

一 般 形式 是 : 


<jsp:useBean id= "实例 名 ”class = " 包 . 类 " scope = "page| request| session| application" /> 


其 中 ,id 指定 一 个 JavaBean 类 的 实例 名 ,如 果 这 个 实例 已 经 存在 ,将 直接 引用 这 个 实 
例 ; 如 果 这 个 实例 不 存在 ,将 通过 后 面 class 参数 中 的 定义 新 建 一 个 类 的 实例 。class 参数 
设置 存储 JavaBean 的 路 径 和 类 的 名 称 ,例如 class 二 "cards. NameCard" , 则 表明 要 使 用 Web 
应 用 根 日 录 中 “WEB-INF\classes\cards” 下 的 一 个 NameCard. class 文件 ,其 中 cards 是 包 
名 ,NameCard 为 JavaBean 对 应 的 Java 类 名 。 

参数 scope 用 于 定义 实例 存在 的 范围 , 即 定 义 这 个 实例 所 绑 定 的 区 域 及 有 效 范 围 。 

。 page, 这 个 JavaBean 将 存在 于 该 JSP 文件 以 及 此 文件 中 的 所 有 静态 包含 文件 中 , 直 


到 页 面 执行 完毕 为 止 。 

。 request, 这 个 JavaBean 将 作为 一 个 对 象 绑 定 于 该 页 面 的 request 中 , 即 该 JavaBean 
在 该 页 面 发 出 的 请 求 中 有 效 。 

。 session ,这 个 JavaBean 将 作为 一 个 对 象 绑 定 于 session 中 , 即 该 JavaBean 在 本 地 
有 效 。 
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。 application, 这 个 JavaBean 将 作为 一 个 对 象 绑 定 于 application 中 , 即 该 JavaBean 在 
本 应 用 中 有 效 。 
(2) 能 入 Java 代码 方式 访问 JavaBean 
JavaBean 是 一 个 Java 类 ,在 JSP 中 也 可 以 使 用 导入 (import) Java 类 的 方法 使 用 
JavaBean ,具体 步 骤 如 下 : 
@ 首 行 导入 JavaBean, 例 如 : 要 导入 的 JavaBean 为 xxx, 语 句 如 下 : 


< 外 四 page import = "com. javaBean. xxx" 和 > 


@ 下 边 就 可 以 像 在 Java 语言 中 一 样 来 使 用 这 个 JavaBean 了 ,例如 : 


<% xxx obj = new xxx(); 委 > 


【 例 6-9】 编写 一 个 JavaBean, 来 读 取 服 务 器 当前 系统 的 日 期 和 时 间 , 并 返回 相应 的 字 
符 串 。 

分 析 : 我 们 编写 一 个 关于 时 间 处 理 的 JavaBean, 关 于 时 间 操 作 是 JSP 中 经 常 使 用 的 功 
能 ,代码 清单 (文件 名 : mytime. java) 如 下 : 


package pub; 
public class mytime { 
public String getDateTime() { 
String datestr = ""; 
java. text. DateFormat df = new java.text.SimpleDateFormat("yyyy— MM- dd HH:mm") ; 
java. util.Date mydate = new java.util.Date(); 
datestr = df.format(mydate) ; 
return datestr ; 
} 
public String getTime() { 
String timestr = ""; 
java. text. DateFormat tf = new java. text. SimpleDateFormat ("HH:mm:ss" ); 
java. util. Date ud = new java. util. Date( ); 
timestr = tf. format (ud); 
return timestr; 
} 

} 

在 Web 应 用 中 ,用户 定义 的 类 或 JavaBean 通常 存储 在 Web 应 用 根 目 录 下 的 “WEB- 
INF\classes\ ”文件 夹 中 ,对 classes 文件 夹 , 还 可 以 进一步 划分 子 文件 夹 ( 包 ) ,以 实现 用 户 类 
定义 的 分 类 存储 和 管理 。 例 如 : 上 述 JavaBean 应 存储 在 Web 应 用 根 目录 中 的 “WEB-INF\ 
classes\pub” 中 ,用 javac mytime. java 编译 生成 mytime. class, 该 文件 将 存储 在 pub 包 中 ， 
即 pub 子 文件 夹 中 。 只 有 按照 上 述 存储 ,Tomcat 才能 够 正确 地 定位 类 文件 。 

【 例 6-10】 编写 一 个 JSP 页 面 ,使 用 例 6-9 中 定义 的 JavaBean。 

分 析 : JavaBean 主要 应 用 在 JSP 页 面 中 ,通常 通过 < jsp:useBean > 标记 来 应 用 ,调用 
JavaBean 很 简单 ,下 面 代码 演示 了 例 6-9 中 定义 的 JavaBean 在 一 个 JSP 文 档 中 的 使 用 , 文 
件 名 为 test-javabeans. jsp ,代码 清单 如 下 : 

<%@ page contentType = "text/html;charset = UTF -8" %> 

<%(@ page language = "java" %> 

<jsp:useBean id= "mytime" class = "pub. mytime" scope = "application" /> 


<html> 

<body> 

服务 器 系统 当前 日 期 : <% = mytime. getDateTime().substring(0,16)%><br> 

服务 器 系统 当前 时 间 : <% = mytime.getTime()%><br> 

</body > 

</html > 

在 MyEclipse 开发 环境 ,执行 New/File 命令 ,新 建 一 个 空白 文件 ,文件 命名 为 test- 
javabeans. jsp ,文件 保存 位 置 为 Web 应 用 主 目录 。 将 上 述 代码 复制 到 新 建文 件 中 ,保存 该 
文件 。 然 后 ,在 MyEclipse 中 ,执行 Windows 一 Show View 一 Servers 命令 ,打开 Servers 面 
板 。 如 果 项 目 未 部 署 ,首先 部 署 该 项 目 , 然 后 启动 MyEclipse 内 置 Tomcat, 即 运行 该 站 点 。 
此 时 ,在 浏览 器 地 址 栏 中 输入 : http://127. 0. 0. 1:8080/ 项 目 名 称 test-javabeans. jsp, 则 浏 
览 器 将 显示 test-javabeans.jsp 服务 器 页 的 运行 结果 。 

如 果 不 使 用 MyEclipse 等 Java 集成 开发 环境 ,而 是 自己 配置 了 Web 服务 器 (Tomcat)， 
且 安 装 了 Java 运行 环境 ,并 配置 了 JDK JRE 和 Tomcat 运行 目录 。 在 浏览 器 中 输入 上 述 
页 面 地 址 ,同样 可 以 看 到 网 页 运行 结果 。 


6.5 数据 库 编程 


所 谓 计算 机 软件 系统 ,从 本 质 上 讲 就 是 数据 和 程序 两 部 分 ,数据 存储 了 业务 中 相关 的 数 
据 , 程 序 是 对 业务 流程 的 描述 ,是 对 数据 的 处 理 。 在 计算 机 系统 中 ,数据 的 存储 可 分 为 文件 
和 数据 库 两 种 模式 。 一 般 的 应 用 软件 ,例如 Word、Excel、Photoshop 等 ,都 有 注册 的 文档 类 
型 ,采用 特定 格式 的 文件 存储 数据 。 在 Web 应 用 中 ,通常 使 用 数据 库 管 理 系统 (Database 
Management System) 来 存储 和 管理 系统 数据 ,用 户 程序 不 直接 操作 数据 库 文件 ,应 用 系统 
通过 相应 的 数据 接口 来 访问 和 操作 数据 库 。 


6.5.1 数据 库 与 数据 库 服务 器 


简单 地 讲 ,程序 是 对 数据 的 处 理 , 数 据 的 存储 和 管理 可 以 分 为 文件 管理 和 数据 库 管 理 两 
种 模式 。 文 件 管理 由 程序 本 身 负责 ,程序 对 其 操作 的 数据 以 文件 的 方式 存储 和 应 用 ,程序 了 
解 文件 格式 ,例如 : 字 处 理 器 Word ,图像 处 理工 具 Photoshop 等 ,它们 都 创建 特定 格式 的 文 
件 , 用 于 存储 数据 。 对 于 数据 量 巨大 数据 操作 频繁 的 数据 集合 ,采用 文件 方式 管理 的 效率 
很 低 ,通常 采用 数据 库 管理 模式 。 所 谓 数据 库 管 理 模式 ,就 是 由 专用 的 数据 库 管 理 系 统 ( 数 
据 库 服务 器 ) 负 责 数据 的 新 建 、 添 加 、 修 改 、 删 除 和 查询 等 操作 ,应 用 软件 通过 数据 库 服务 器 
来 使 用 数据 ,而 不 是 直接 对 数据 进行 管理 和 维护 。 

1. 数据 库 服务 器 

在 Web 系统 开发 中 ,后 台 的 数据 管理 通常 采用 数据 库 模 式 , 需 要 在 服务 端 配置 数据 库 
服务 器 。 所 谓 数 据 库 服务 器 ,就 是 指 安装 了 数据 库 管理 系统 (Database Management 
System) 软 件 的 计算 机 ,负责 为 客户 应 用 程序 提供 数据 服务 。 目 前 ,常用 的 数据 库 管理 系统 
有 Oracle、MS SQL-Server 和 MySQL .其 中 前 两 者 为 商业 数据 库 , 后 者 为 开源 数据 库 。 

(1) Oracle 数据 库 系 统 , 又 称 Oracle RDBMS (Relational Database Management 
System) ,或 简称 Oracle, 是 美国 Oracle 公司 (甲骨 文 ) 提 供 的 以 分 布 式 数据 库 为 核心 的 一 组 
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软件 产品 ,是 日 前 最 流行 的 客户 /服务 器 (Client/Server,C/S) 或 浏览 器 /服务 器 (Browser/ 
Server, B/S) 体 系 结构 的 数据 库 之 一 。 系 统 功能 强大 ,使 用 方便 、 可 移植 性 好 ,在 数据 库 管 
理 系统 领域 一 直 处 于 领先 地 位 。 

(2) SQL Server 数据 库 系统 ,微软 的 关系 数据 库 管理 系统 。 它 最 初 是 由 Microsoft、 
Sybase 和 Ashton-Tate 三 家 公司 共同 开发 的 .于 1988 年 推出 了 第 一 个 OS/2 版 本 。 在 微软 
推出 Windows NT 后 ,Microsoft 将 SQL Server 移植 到 Windows NT 系统 上 ,专注 于 开发 
推广 SQL Server 的 Windows NT 版 本 , 即 Microsoft SQL Server。Sybase 则 专注 于 SQL 
Server 在 UNIX 操作 系统 上 的 应 用 。 目 前 ,在 微软 的 Windows 平 台 , 常 用 的 数据 库 系 统 为 
MS SQL Server, 

微软 的 MS SQL Server 采用 图 形 界面 ,数据 库 操作 简单 .管理 方便 ,并 对 SQL 语言 
行 了 扩展 ,开发 了 Transact-SQL(T-SQL) 语 言 。 这 些 年 来 ,MS SQL Server 一 直 进 行 版 本 
升级 ,功能 日 益 强 大 ,是 目前 Windows 系统 下 进行 软件 开发 常用 的 数据 库 管理 系统 。 

(3) MySQL 数据 库 系统 ,MySQL 是 一 个 开源 的 SQL 数据 库 管 理 系 统 。 作 为 开源 数据 
库 ,MySQL 的 发 展 经 历 了 三 个 阶段 , 即 初期 开源 数据 库 阶 段 .Sun MySQL 阶段 和 Oracle 
MySQL 阶段 。MySQL 的 发 展 可 以 追溯 到 1979 年 , 它 是 由 天 才 程 序 员 Monty WideniusQ 
在 TcX 公司 开发 客户 报表 工具 过 程 中 发 展 而 来 的 。 直 到 1999 年 , Monty 在 瑞典 创立 
MySQL AB 公司 。2003 年 12 月 ,MySQL 5. 0 版 本 发 布 ,提供 了 视图 、 存 储 过 程 等 功能 。 

2008 年 1 月 ,MySQL AB 公司 被 Sun 公司 以 10 亿美 金 收购 ,MySQL 数据 库 进入 Sun 
时 代 。 在 Sun 时 代 ,Sun 公司 对 其 进行 了 大 量 的 推广 ,优化 、Bug 修复 等 工作 。2009 年 4 
月 ,Oracle 公司 以 74 亿美 元 收购 Sun 公司 , 自 此 MySQL 数据 库 进 入 Oracle 时 代 。Oracle 
公司 同时 也 承诺 MySQL 未 来 版 本 仍 是 采用 GPL 授权 的 开源 产品 。 

MySQL 是 开源 的 数据 库 , 这 意味 着 任何 人 都 可 以 在 其 源码 的 基础 上 分 支出 自己 的 
MySQL 版 本 ,并 且 可 以 在 原 MySQL 数据 库 的 基础 上 进行 一 定 的 修改 ,这 是 开源 赋予 用 户 
的 权力 。 例 如 ,在 MySQL 数据 库 被 Oracle 公司 收购 后 ,Monty 担心 MySQL 数据 库 发 展 的 
未 来 ,从 而 分 支出 一 个 版 本 , 即 MariaDB。 

目前 ,MySQL 已 经 成 为 最 为 流行 的 开源 关系 数据 库 系统 ,并 且 一 步 一 步 地 占领 了 原 有 
商业 数据 库 的 市 场 。 许 多 大 型 的 互联 网 企业 和 网 络 游 戏 公 司 的 后 台 都 在 使 用 MySQL 数据 
库 。 此 外 ,MySQL 数据 库 不 再 仅仅 应 用 于 Web 项 目 . 其 扮演 的 角色 也 更 为 丰富 。 

2. MySQL 安装 与 配置 

登录 MySQL 官方 网 站 (http://www. mysql. com/) ,下载 MySQL Community Edition 
(GPL 社 区 版 ), 即 免费 下 载 版 本 ,而 不 是 商业 (commercial) 版 本 。MySQL Community 
Edition 包含 了 各 种 操作 系统 版 本 ,以 支持 不 同 环境 下 的 数据 库 应 用 开发 。 选 择 MySQL on 
Windows, 可 以 看 到 一 组 相应 的 安装 程序 ,包括 MySQL Installer、MySQL Connectors、 
MySQL Workbench、MySQL for Excel 等 ,根据 操作 系统 类 型 (在 Windows 中 , 右 击 桌面 上 


@ Monty Widenius,1962 年 3 月 3 日 出 生 于 芬兰 赫尔辛基 ,是 MySQL 的 CTO 及 共同 创始 人 。 关 于 MySQL、 
MaxDB、MariaDB 名 字 的 由 来 .有 一 个 小 插曲 。Monty 有 一 个 女儿 ,名 叫 My, 因 此 他 将 自己 开发 的 数据 库 命名 为 
MySQL。Monty 还 有 一 个 儿子 ,名 为 Max, 因 此 在 2003 年 ,SAP 公司 与 MySQL 公司 建立 合作 伙伴 关系 后 ,Monty 又 将 
与 SAP 合作 开发 的 数据 库 命名 为 MaxDB。 而 后 来 的 MariaDB 中 的 Maria 则 是 Monty 小 孙女 的 名 字 。 


“计算 机 ?图 标 ,在 属性 中 可 以 看 到 操作 系统 的 类 型 是 32 位 还 是 64 位 ) ,根据 需要 依次 下 载 
相应 的 MSIG 安装 程序 包 。 

运行 MySQL 安装 程序 ,在 安装 类 型 列表 页 面 ,根据 需要 选择 安装 类 型 ,默认 情况 下 选 
择 Developer Default, 即 安 装 MySQL Server、MySQL Workbench、 MySQL for Excel、 
MySQL for Visual Studio 和 My SQL Connectors。 然 后 按照 安装 向 导 提 示 操 作 。 

在 MySQL 的 安装 过 程 中 ,没有 提供 安装 目录 设置 界面 ,一 般 默 认 安 装 在 Windows 的 
ProgramFiles 文件 夹 下 ,创建 一 个 名 为 MySQL 的 文件 夹 ,包含 MySQL 的 安装 目录 结构 。 

MySQL 安装 完成 后 , 它 以 Windows 服务 器 的 形式 运行 ,可 以 通过 Windows 控制 面板 
的 管理 工具 程序 组 中 的 “计算 机 管理 "程序 查看 当前 系统 启动 的 服务 ,可 以 看 到 名 为 
MySQL57 的 服务 已 经 启动 。 在 Windows 操作 系统 下 ,可 以 修改 服务 的 启动 方式 ,停止 或 
启动 一 个 服务 。 有 两 种 方式 ,一 种 是 在 “计算 机 管理 ?程序 中 完成 ,一 种 是 在 Windows 命令 
行 窗 口 ,输入 net [start \stop] mysql57 命令 来 启动 或 停止 MySQL 服务 。 

对 于 一 个 数据 库 服务 器 ,通常 还 需要 进行 适当 的 配置 以 符合 用 户 的 需要 。 这 些 配置 主 
要 包括 : 

(1) 设置 数据 库 目 录 结 构 , 包 括 存 放 用 户 数据 库 的 文件 夹 

(2) 设置 数据 库存 储 的 字符 编码 ,一般 设置 为 UTF8。 

(3) 设置 用 户 账户 和 密码 。 

3. 登录 MySQL 

MySQL 安装 完成 后 ,在 Windows “开始 "菜单 中 ,增加 MySQL 程序 组 ,包含 MySQL 


Command Line Client 命令 , 单 击 该 命令 ,打开 MySQL 命令 行 窗口 ,如 图 6-10 所 示 























下 | 
国 MySQL 57 Command Line Client Cie 
Enter password: 
We lcome to the SQL monitor. Conmands end with ; or g. 
Your MySQL connection id is 8 
Server version: 5.7.12-1og MySQL Comnunity Server 《GI 
ICopyright Cc> 2868,. 2016,. Oracle and/or its affiliates. All rights reserved. 
regis red tradenark of Oracle Corporation and/or its 
Other nanes may be trad of their respective 
DEL or "\h′ for help。 Type "\c” to clear the current input statement. 
Inysql> - 
Le Sy 





图 6-10 MySQL 命令 行 窗 口 


四 MSI(Microsoft Installen) 文 件 是 Windows Installer 的 数据 包 , 包 含 安装 一 种 产品 所 需要 的 信息 和 在 很 多 安装 情 
形 下 安装 (和 和 镍 载 ) 程 序 所 需 的 指令 和 数据 。 它 包含 了 有 关 安 装 过 程 本 身 的 信息 ,如 安装 序列 号 、 目 标 文件 夹 路 径 , 安 装 
选项 和 控制 安装 过 程 属性 。Windows Installer 执行 所 有 与 安装 有 关 的 任务 : 包括 将 文件 复制 到 硬盘 、 修 改 注册 表 、 创 建 
桌面 快捷 方式 .必要 时 显示 提示 对 话 框 以 便 用 户 输入 安装 首选 项 。 





服务 端 编程 


才 加 碟 


Web 技术 时 论 ( 委 4 版 ) 





在 命令 行 窗口 ,首先 提示 输入 MySQL 超级 用 户 账户 (root) 和 密码 ,通过 后 ,显示 


MySQL 提示 符 : mysql >， 


进入 MySQL 命令 行 输入 状态 。 在 MySQL 提示 符 状 态 ,可 以 输 


入 MySQL 命令 (以 西 文 分 号 结束 ) ,执行 相应 的 数据 库 操作 。 常 见 的 数据 库 操 作 命令 见 


表 6-6。 


A 
令 


命 


表 6-6 MySQL 常用 数据 库 操作 命令 


功 能 





show databases; 


显示 数据 库 服 务 器 中 已 有 的 数据 库 列 表 





show tables; 


显示 库 中 的 数据 表 。 例 如 : 显示 world 数据 库 的 数据 表 , 输 入 命令 如 下 : 
use world; 


show tables; 





describe 表 名 ， 


显示 数据 表 的 结构 





create database < 库 名 > 
character set 一 < 字符 编码 >; 


创建 数据 库 ,并 设置 数据 库 编 码 方式 。 使 用 show create database < 数据 库 
> 命令 可 以 显示 创建 数据 库 时 使 用 的 数据 编码 。 通 过 alter 命令 可 以 修改 
数据 库 的 编码 方式 











create table 表 名 ; 二 

create table 表 名 (字段 设 定 列 表 ); 
drop database 库 名 ; 删除 一 个 数据 库 
drop table 表 和 名; 删除 数据 表 





delete from 表 名 ; 


将 表 中 记录 清空 





select * from 表 名 ; 


显示 表 中 的 记录 





例如 ,输入 show databases; 命令 显示 系统 中 已 有 数据 库 列 表 。 可 以 看 到 ,安装 完 
MySQL 后 ,系统 包含 6 个 数据 库 , 分 别 是 information_ schema、 mysql、 performance_ 
schema、sakila、sys 和 world。 可 以 使 用 上 述 命令 进一步 查看 数据 库 数 据 表 及 存储 的 数据 
记录 。 

除了 使 用 MySQL 命令 行 客户 端 程序 外 ,如 果 将 MySQL 安装 目录 添加 到 了 系统 的 环 
境 变 量 Path 中 , 则 在 Windows 系统 的 命令 行 窗口 .也 可 以 运行 mysql 命令 ,进行 MySQL 
的 登录 和 操作 ,具体 的 目录 结构 和 操作 命令 与 MySQL 版 本 有 关 。 

4. MySQL 管理 工具 

在 服务 器 上 安装 了 数据 库 管理 系统 后 ,该 计算 机 即 成 为 一 台数 据 库 服务 器 。 从 程序 的 
角度 讲 ,数据 库 管理 系统 是 以 服务 的 方式 存在 的 。 通 常情 况 下 .为 了 管理 一 个 服务 程序 ,还 
需要 有 相应 的 管理 工具 。 如 MS SQL Server 中 的 Microsoft SQL Server Management 
Studio 和 SQL Server Enterprise Manager 都 可 以 对 数据 库 服务 器 进行 管理 。 

在 MySQL 数据 库 管 理 系统 中 ,通过 MySQL Command Line Client 程序 对 数据 库 管 理 
是 非常 麻烦 的 , 且 不 够 直观 。 为 此 ,MySQL 数据库 系统 提供 了 相应 的 管理 工具 ,常用 的 管 
理工 具有 PHP MyAdmin、Navicat for MySQL 和 MySQL Workbench, 其 中 前 者 是 Web 界 
面 的 管理 工具 ,后 两 者 为 图 形 界 面 程序 。 下 面 我 们 重点 介绍 MySQL Workbench 的 使 用 。 

MySQL Workbench 是 一 款 专 为 MySQL 设计 的 可 视 化 数据 库 设 计 、 管 理 的 工具 ,为 数 
据 库 管 理 员 (DBA) 和 开发 者 提供 的 一 个 集成 开发 环境 ,同时 有 开源 和 商业 化 的 两 个 版 本 ， 
并 有 中 文 版 。 使 用 Workbench 可 以 进行 以 下 几 个 方面 的 工作 : @ 数 据 库 设计 和 建 模 ; 


@SQL 开发 (取代 原来 的 MySQL Query Browser); 加 数据 库 管理 (取代 原来 的 MySQL 
Administrator) 。 

首先 从 MySQL 官方 网 站 下 载 MySQL Workbench ,选择 MySQL Community Edition , 
选择 MySQL Workbench 的 Windows 操作 系统 版 本 ,下 载 MSI Installer 安装 包 。 安 装 包 
有 32 位 和 64 位 两 种 版 本 ,如 果 64 位 安装 包 安 装 后 不 能 正常 运行 ,可 尝试 安装 32 位 安装 
包 。 双 击 安装 程序 包 , 启 动 MySQL Workbench 安装 过 程 向 导 , 根 据 向 导 提 示 操 作 , 完 成 
MySQL Workbench 管理 工具 的 安装 。 

运行 MySQL Workbench 管理 工具 ,打开 MySQI Workbench 主 窗口 ,如 图 6-11 所 示 。 
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图 6-11 MySQL Workbench 主 窗口 


使 用 MySQL Workbench 管理 工具 .可 以 对 MySQL 服务 器 进行 配置 和 管理 ,也 可 以 完 
成 数据 库 的 各 种 操作 。 

(1) 连接 到 MySQL。 在 MySQL 窗口 ,显示 MySQL Connections 列表 , 单 击 Local 
Instance MySQL57 ,打开 Connect to MySQL Server 对 话 框 ,输入 超级 用 户 root 的 登录 密 
码 ,连接 到 MySQL Server ,如 图 6-12 所 示 。 

在 左 侧 导航 器 (Navigator) 窗 口 ,包括 两 个 部 分 ,上 面 是 服务 器 的 管理 , 下 面 列 出 了 服务 
器 中 已 有 的 数据 库 列 表 。 单 击 SCHEMAS 右 端的 刷新 和 最 大 /最 小 化 按钮 ,可 以 扩大 或 缩 
小 SCHEMAS 窗 格 空间 大 小 。 单 击 数据 库 列 表 项 左 侧 的 右 向 箭头 ,显示 数据 库 的 数据 表 








(Tables) .视图 (Views) 存储 过 程 (Stored Procedures) 和 畏 数 (Functions) 节 点 ,可 以 进行 
相应 的 操作 。 


(2) 查看 服务 器 状态 。 在 左 侧 导航 窗口 , 单 击 MANAGEMENT 区 域 的 Server Status 
超 链接 ,显示 服务 器 状态 ,如 图 6-13 所 示 。 

在 服务 器 状态 中 ,显示 了 服务 器 的 基本 信息 .以 及 服务 器 的 目录 结构 ,其 中 存储 数据 库 
文件 的 ProgramData 为 Windows 系统 隐藏 文件 夹 , 包 含 了 相关 的 数据 文件 。 
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图 6-12 连接 到 MySQL Server 
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图 6-13 ”MySQL 服务 器 状态 


单 击 Client Connections 显示 数据 库 服务 器 的 所 有 连接 列表 ,通过 该 连接 列表 可 以 查看 
用 户 的 数据 库 应 用 中 的 数据 库 连 接 是 否 正常 地 断 开 , 以 避免 服务 器 过 多 的 Sleep 连接 而 导 
致 连接 失败 。 





(3) 创建 数据 库 与 数据 表 。 单 击 Create a new Schema 工具 按钮 ,显示 创建 数据 库 界 
面 ,输入 数据 库 名 字 , 选 择 编码 方式 ,选择 Server Default, 单 击 Apply 按钮 ,打开 Apply SQL 
Script to Database 对 话 框 ,显示 创建 数据 库 SQL 命令 : 


CREATE SCHEMA 'hao'7 


创建 数据 库 后 ,就 可 以 在 数据 库 中 新 建 数 据 表 了 。 在 左 侧 的 新 建 数据 库 hao 节点 上 , 单 
击 ,在 Tables 节点 右 击 ,执行 Create Table 快捷 命令 ,显示 新 建 数据 表 界 面 ,输入 数据 表 名 
字 , 例 如 useraccounts, 选择 utf8 默认 编码 方式 ,数据 库 引 擎 选 默认 的 InnoDB, 输入 
Comments 说 明 性 文字 。 然 后 , 单 击 右 侧 的 双向 箭头 按钮 ,展开 数据 字段 编辑 区 域 , 依 次 输 
入 数据 表 字段 信息 ,如 图 6-14 所 示 。 























图 Table Name: [eraccounts | schema: hao 公 
Colaton: [utfB-defaut colaton 习 Engne: [meoa 了 
用 户 账户 数据 表 
Comments: 
| Colmn Name Datatype Mm NN UQ 8 UN ZF A G DefadyExpresson 
上 d INT 图 病因 四 下 四 下 四 
useraccount VARCHAR(15) 图 加 酝 加 百 
pwd VARCHAR(8) 回 圆 圆 『2345678 
男 百 I 固 
Column Name: pwd Data Type: = VARCHAR(S) 
Colavon: [Table Defodt |] Epresson 
Comments: Storage: 罚 Wtual © Stored 
固 Prmayrey 团 Notmdl 国 Uniue 
加 Bnary 周 unsmed 加 Zeromn 


Auto Inaement 图 Generated 





图 6-14 新建 数 据 表 


当 数 据 字 段 编 辑 结束 后 , 单 击 Apply 按钮 ,显示 SQL 脚本 如 下 : 


CREATE TABLE 'hao'.'useraccounts' ( 
'id' INT NOT NULL, 
"useraccount' VARCHAR(15) NOT NULL, 
"pwd' VARCHAR( 8) GENERATED ALWAYS AS (12345678) VIRTUAL, 
PRIMARY KEY ('id', ‘useraccount')) 
ENGINE = InnoDB 
DEFAULT CHARACTER SET = utf8 
COMMENT = ' 用 户 账户 数据 表 '; 
如 果 确 认 无 误 , 单 击 Apply 按钮 ,创建 数据 表 。 然 后 ,在 Query 窗口 ,可 以 通过 
INSERT 命令 在 数据 表 中 添加 记录 ,或 用 SELECT 命令 查看 数据 表 记 录 。 
用 户 创 建 的 数据 库 文件 将 保存 到 MySQL 的 默认 文件 夹 C:\ProgramDB\MySQL 相应 
的 子 文件 夹 中 ,如 果 要 修改 用 户 数据 库 的 默认 存储 位 置 ,首先 ,停止 MySQL 服务 ; 然后 更 
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改 MySQL 配置 文件 My. ini 中 的 数据 库存 储 主 路 径 。 

打开 MySQL 默认 安装 文件 夹 C:\Program Files\MySQL\MySQL Server5.7, 在 记事 
本 中 打开 MySQL 配置 文件 my. ini, 找 到 “Path to the database root 数据 库存 储 主 路 径 ” 参 
数 设 置 , 默认 为 datadir = 二" C:/Documents and Settings/All Users/Application Data/ 
MySQL/MySQL Server 5. 7/Data/" , 即 默 认 的 数据 库存 储 主 路 径 设置 , 可 将 其 改 到 用 户 需 
要 的 文件 夹 ,例如 d:/haosite/database. 则 将 设置 修改 为 datadir 一 "d:/haoseie/database/"， 
更 改 完成 后 保存 文件 。 最 后 ,将 原 数据 库存 储 主 路 径 中 数据 库 对 应 的 文件 夹 复 制 到 新 的 存 
储 路 径 下 。 


6.5.2 JDBC 接口 


在 Web 服务 端 ,数据 库 管 理 系统 负责 系统 数据 的 管理 ,应 用 软件 不 能 直接 操作 数据 库 
文件 ,对 数据 的 操作 是 通过 数据 库 服 务 器 完成 的 。 用 户 应 用 软件 要 操作 数据 , 需 通过 数据 库 
服务 器 提供 的 接口 来 完成 。 为 了 实现 Java 程序 中 对 数据 库 的 操作 ,Sun 在 JDK 中 ,开发 了 
java. sqdl 包 , 定 义 了 一 组 进行 数据 库 连 接 和 操作 的 类 和 接口 , 称 为 Java 数据 库 连接 (Java 
Data Base Connectivity,JDBC ) 。 

对 于 程序 员 来 讲 , 利 用 JDBC, 用 户 不 需要 为 不 同 的 数据 库 系统 编写 专门 的 访问 程序 ， 
只 需 用 JDBC API 写 一 个 程序 就 够 了 , 它 可 向 相应 数据 库 发 送 SQL 调用 ,为 多 种 关系 数据 
库 提 供 统 一 访问 。 只 有 JDBC ,还 不 能 对 数据 库 进 行 操作 。 因 为 数据 库 服务 器 必须 要 理解 
JDBC API 发 送 的 指令 才能 够 操作 数据 库 , 这 就 要 求 数据 库 厂商 提供 针对 其 具体 的 数据 库 
产品 的 JDBC 驱动 程序 , 即 让 数据 库 服务 器 理解 JDBC 发 送 的 指令 含义 。 

1. 数据 库 服 务 器 JDBC 驱动 

开发 数据 库 应 用 ,除了 安装 数据 库 服 务 器 外 ,还 需要 安装 JDBC 驱动 程序 。 大 多 数 的 数 
据 库 管 理 系 统 , 如 Oracle、MS SQL Server、MySQL 和 MS Access 等 ,都 带 有 和 Java 相配 的 
JDBC 驱动 程序 ,Java 程序 通过 JDBC 驱动 程序 即 可 实现 与 数据 库 的 相连 ,执行 查询 、 提 取 
数据 等 操作 。 对 于 一 个 Java 应 用 系统 ,其 代码 与 安装 的 数据 库 管理 系统 有 较 好 的 独立 性 ， 
如 果 系 统 改变 所 使 用 的 数据 库 管 理 系统 ,只 需要 安装 新 的 JDBC 驱动 即 可 。 

要 使 用 JDBC 驱动 程序 ,首先 要 在 系统 中 进行 安装 和 配置 。 在 Web 应 用 中 ,WEB-INF 
\ 文 件 夹 中 包括 lib 子 文件 夹 和 classes 子 文件 夹 :其 中 lib 文件 夹 存储 应 用 系统 所 需要 的 驱 
动 程序 包 . jar 文件 ,classes 文件 夹 存储 用 户 定义 的 类 。 在 WEB-INF\classes 文件 夹 下 ,可 
以 进一步 再 定义 一 些 子 文件 夹 ( 即 用 户 包 ) ,分 类 存储 用 户 定义 的 Java 类 和 JavaBean 源 文 
件 和 . class 文件 ,例如 ,定义 WEB-INF\classes\pub 文件 夹 下 ,存储 关于 数据 库 操 作 的 
JavaBean。 

在 安装 数据 库 服务 器 时 ,通常 包含 数据 库 的 JDBC 驱动 。 驱 动 程序 可 以 从 网 上 查找 并 
下 载 ,例如 MS SQL Server 2005 的 驱动 为 sqlidbc. jar.MySQL 的 JDBC 驱动 称 为 My SQL 
JDBC Connectors。 在 系统 运行 中 ,用 户 程 序 JSP 网 页 或 Servlet 在 Tomcat 容器 中 运行 ,过 
到 数据 库 操作 时 ,需要 定位 JDBC 驱动 。 因 此 :数据 库 JDBC 驱动 应 复制 到 WEB-INF\lib 
文件 夹 中 ,同时 ,在 系统 环境 变量 的 classpath 中 添加 驱动 所 在 的 目录 , 即 在 环境 变量 
classpath 设置 的 后 面 , 添 加 下 面 路 径 : 用 户 系统 所 在 的 驱动 器 : 根 目录 \ WEB-INF\lib\, 例 
如 : d:\haosite\WEB-INF\lib\。 


2. 连接 数据 库 服务 器 

安装 数据 库 服 务 器 后 ,还 需要 进一步 安装 相应 的 JDBC 数据 库 驱 动 。 在 MyEclipse 中 
要 连接 到 MySQL 数据 库 , 需 要 为 其 配置 JDBC 驱动 ,基本 步骤 如 下 : 

(1) 从 MySQL 官方 网 站 (http://www. mysql. com/) 或 网 上 搜索 MySQL JDBC 驱动 
(JDBC Driver for MySQL Connector) ,例如 mysql-connector-java-5. 1. 36. jar, 下载 该 驱 
动 包 。 

(2) 在 MyEclipse 中 ,执行 Window->Open Perspective>MyEclipse Database Explorer 
命令 ,打开 数据 库 管理 窗口 。 

(3) 在 窗口 左 侧 空白 处 右 击 , 在 弹出 菜单 中 选择 New, 打 开 数 据 库 驱动 添加 窗口 ,如 
图 6-15 所 示 。 


New Database Connection Driver 
Create a new connection driver 





Driver template: 





Driver name: mysql 
Connection URL: jdbcmysqk//127.0.0.1:3306/testdb 

















Driver classname: com.mysqljdbc Driver 和 

OD Connect to detabase on MyEclipse stertup 

同 Save password 

® Saved passwords are stored on your computer in a file thats diffcuk but not impossible for an intruder to 
read. 

















6-15 新 建 数据 库 连 接 驱 动 


首先 单 击 Add JARs ,添加 下 载 的 驱动 JARS 文件 。 添 加 完成 后 .选择 Driver classname 
驱动 类 名 : com. mysql. jdbc. Driver。 

然后 ,填写 有 关 MySQL 数据 库 服务 器 的 相关 信息 ,包括 : 

。 Driver template( 驱 动 模板 ): MySQL Connector/J。 

。 Driver name( 驱 动 名 ): MySQL Connector/J (备注 : 便于 记忆 ,可 随意 )。 

。 Connection URL( 连 接 路 径 ): jdbc:mysql// :localhost:3306 。 
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。 User name( 用 户 名 ) : root。 
。 Password( 访 问 密码 ) 。 

其 中 ,Connection URL 是 数据 库 服务 器 的 网 址 ,3306 是 MySQL 服务 器 端口 号 。 

设置 完成 后 , 单 击 Test Driver 按钮 ,测试 驱动 的 安装 情况 ,成功 后 , 单 击 Finish 按钮 完 
成 驱动 添加 。 驱 动 器 添加 成 功 后 ,双击 MySQL Connector/J ,弹出 登录 窗口 ,输入 MySQL 
数据 库 密 码 , 即 可 连接 到 MySQL。 

3. Java 访问 数据 库 相 关 类 

在 Java 中 ,定义 了 java. sql 包 ,java. sql 包 是 数据 库 服务 器 JDBC 驱动 的 API 接口 , 定 
义 了 所 有 的 JDBC 应 用 相关 的 类 和 方法 ,常用 的 类 和 接口 有 : 

(1) java. sql. DriverManager 类 

DriverManager 类 主要 用 于 处 理 数 据 库 服 务 器 JDBC 驱动 程序 的 调 入 ,并 且 对 新 的 数据 
库 连接 提供 支持 ,包含 多 个 静态 方法 ,不 需要 实例 化 。 常 用 方法 包括 : 

。 public static Connection getConnection(String url, String user, String pwd) ,静态 方 

法 ,建立 和 数据 库 服 务 器 程序 的 连接 ,返回 一 个 Connection 类 对 象 。 

其 中 ,url 设置 要 连接 的 数据 库 名 ,例如 : 连接 MS SQL Server 数据 库 服 务 器 的 url 设 
置 为 : "jdbc:sqlserver://localhost:1433;DatabaseName 王 数据 库 名 ",user 和 pwd 对 应 该 
数据 库 服务 器 的 用 户 名 和 密码 ,可 以 通过 数据 库 服 务 器 的 管理 界面 得 到 。 连 接 MySQL 数 
据 库 服务 器 的 url 为 : "jdbc:mysql://localhost:3306/ 数 据 库 名 "，"root"，"123456") 。 

。 setLoginTimeOut(int seconds) , 设 定 等 待 数据 库 服 务 器 连接 的 最 长 时 间 。 

(2) java. sql. Connection 类 

Connection 代表 和 数据 库 的 连接 ,用 户 通过 该 类 对 象 操作 特定 的 数据 库 , 常 用 方法 
如 下 : 

。 getMetaData() ,返回 数据 库 的 相关 元 数据 信息 ,例如 当前 数据 库 连 接 的 用 户 名 、 使 

用 的 JDBC 驱动 程序 .数据库 允许 的 最 大 连接 数 .数据 库 的 版 本 等 。 

。 createStatement() ,创建 并 返回 一 个 Statement 类 对 象 。 

。 PrepareStatement(String sql) ,创建 并 返回 prepareStatement 对 象 。 

(3) java. sql. Statement 类 

Statement 用 来 执行 静态 SQL 语句 。 常 用 的 方法 有 

。 executeQuery(String sql) ,执行 SELECT 语句 ,返回 一 个 ResultSet 类 对 象 ,保存 查 


询 结 果 数 据 集 。 
。 executeUpdate(String sql) ,执行 INSERT、UPDATE、DELETE 语句 ,进行 数据 记 
录 的 插入、 修改 和 删除 操作 。 


(4) java. sql. PrepareStatement 类 
用 于 执行 动态 的 SQL 语句 , 即 允许 SQL 语句 中 包含 参数 。 使 用 方法 为 : 


String sql = "SELECT coll FROM tablename WHERE col2=? AND col3 =? "; 
PrepareStatement perpStmt = conn.preparestatement(sql); 

perpStmt. setString(1,col2Value); 

perpStmt. setFloat(2, col3Value); 

ResultSet rs = perpStmt. executeQuery(); 


(5) java. sql. ResultSet 类 

ResultSet 用 来 保存 SELECT 语句 查询 得 到 的 记录 和 集 , 用 它 可 以 浏览 和 存 取 数据 库 内 
的 记录 。 字 段 的 类 型 不 同 ,获得 字段 值 的 方法 也 不 相同 ,例如 getString()、getFloat()、 
getInt() ,getTime() 等 可 分 别 获得 字符 串 、 小 数 、 整 数 和 日 期 时 间 型 字段 的 值 。 可 以 通过 字段 
的 序号 或 字段 名 字 来 指定 要 获取 的 某 个 字段 。 在 上 例 中 ,使 用 getString(0) 、getString( "col1") 
都 可 以 获得 字段 coll 的 字符 串 值 ,通过 Integer 对 象 可 以 将 字符 串 值 转换 为 整数 。 

有 些 字段 可 以 使 用 不 同 的 方法 返回 值 ,但 返回 值 的 类 型 可 以 不 同 , 例 如 对 于 一 个 int 字 
段 , 可 以 使 用 getString() 和 getInteger() 来 获取 字段 的 值 , 但 前 者 返回 一 个 字符 串 , 后 者 则 
返回 一 个 整数 值 。 再 如 : 对 于 一 个 Datetime 型 字段 ,可 以 使 用 getString()、getDate()、 
getTime() 不 同 的 方法 返回 数据 ,但 返回 数据 的 类 型 不 同 。 因 此 ,在 选择 get 方法 提取 数据 
字段 值 时 ,应 根据 程序 的 需要 选择 相应 的 方法 ,可 以 节省 数据 类 型 转换 。 


6.5.3 结构 化 查询 语言 SQL 基础 


结构 化 查询 语言 SQL(Structured Query Language) 是 关系 数据 库 管 理 系 统 的 标准 语 
言 , 用 于 存 取 数据 以 及 查询 、 更 新 和 管理 关系 数据 库 系 统 。 不 同 的 关系 数据 库 使 用 的 SQL 
版 本 有 一 些 差异 ,但 大 多 数 都 遵循 ANSI SQL 标准 。 

1. SQL 的 组 成 与 T-SQL 语言 

结构 化 查询 语言 SQL 包含 三 个 组 成 部 分 : 

(1) 数据 定义 语言 (Data Definition Language, DDL), 用 于 定义 关系 数据 库 的 模式 、 外 
模式 和 内 模式 ,以 实现 对 数据 库 基本 表 、 视 图 及 索引 文件 的 定义 、 修 改 和 删除 等 操作 。 最 常 
用 的 DDL 语句 是 CREATE、DROP 和 ALTER 命令 。 

(2) 数据 操作 语言 (Data Manipulation Language,DML) ,用 于 执行 数据 查询 和 数据 更 
新 操作 , 数据 更 新 指 对 数据 进行 插入 .删除 和 修改 操作 。 最 常 使 用 的 DML 语句 是 
SELECT INSERT .UPDATE 和 DELETE 命令 。 

(3) 数据 控制 语言 (Data Control Language,DCL) ,用 于 控制 对 数据 库 的 访问 ,服务 器 
的 关闭 .启动 等 操作 。 常 使 用 的 DCL 命令 有 GRANT REVOKE COMMIT .ROLLBACK 
等 语句 。 

在 实际 应 用 中 ,使 用 较 多 的 是 Transact-SQL(T-SQL), 它 是 微软 遵循 ANSI SQL-92 标 
准 在 Microsoft SQL Server 数据 库 系统 中 使 用 的 语言 。Transact-SQL 语言 分 成 5 部 分 , 即 
数据 定义 语言 .数据 操纵 语言 .数据 控制 语言 事务 管理 语言 和 附加 的 语言 元 素 。 其 中 ,附加 
语言 元 素 主 要 包括 标识 符 、 变 量 和 常量 ,运算 符 、 表 达 式 数据 类 型 .函数 、 控 制 流 语言 .错误 
处 理 语言 .注释 等 。 

在 T-SQL 中 ,定义 了 大 量 的 标准 函数 ,涉及 了 聚合 函数 数学 函数 、 字 符 串 函数 日 期 和 
时 间 函 数 、 系 统 函 数 、 游 标 函 数 和 元 数据 函数 .这 就 给 了 SQL 以 强大 的 编程 能 力 。 关 于 这 些 
函数 的 定义 及 功能 ,超出 本 书 的 写作 范围 ,请 参考 专门 的 T-SQL 书籍 。 

2. 简单 数据 查询 

查询 语句 用 来 对 已 经 存在 于 数据 库 中 的 数据 按照 特定 的 组 合 、 条 件 表达 式 或 者 一 定 次 
序 进行 检索 ,SELECT 语句 的 完整 语法 较 复 杂 , 其 主要 子 句 可 归纳 如 下 : 


SELECT < select list> 
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[INTO <new table>] 

FROM < table source> 

[WHERE < search condition> ] 

[GROUP BY < group_by_expression > ] 

[HAVING < search_condition> ] 

[ORDER BY < orderby_expression > [RSC | DESC]] 

[COMPUTE { {AVG | COUNT | MAX | MIN | SUM } (expression) } [ BY expression]] 


在 SQL 中, SELECT 语句 非常 复杂 ,但 常用 的 子 句 主要 是 SELECT、FROM 和 
WHERE 子 句 。SELECT 子 句 用 于 指定 将 要 查询 的 列 名 称 ,FROM 子 句 指定 了 这 些 数据 来 
自 于 哪些 数据 表 或 视图 , WHERE 子 句 则 用 于 指定 数据 应 该 满足 的 条 件 。 在 一 般 检索 中 ， 
SELECT 子 句 和 FROM 子 句 是 必 不 可 少 的 。 

(1) SELECT 子 句 的 功能 是 指定 要 查询 的 结果 列 ,语法 格式 如 下 : 


SELECT [ ALL | DISTINCT ] [ TOP <n> [ PERCENT ] ] <select list> 
其 中 select_list 定义 为 : 


<select list >::={ * 
| {table name | view name | table alias }. * 
| {column name | expression } [ [ AS ] column alias ] 
| column alias = expression 
} 
各 参数 说 明 如 下 : 
。 ALL: 返回 结果 集中 的 所 有 行 ,系统 默认 值 。 
。DISTINCT: 指明 结果 集中 如 果 有 值 相 同 的 行 , 则 只 显示 其 中 的 一 行 ， 对 于 
DISTINCT 关键 字 来 说 ,Null 值 是 相等 的 。 
。 TOP<n>[ PERCENT ]: 指明 仅 返 回 结 果 集 中 的 前 n 行 ,如 果 有 [ PERCENT ]， 
则 返回 结果 集中 的 百 分 之 n 行 记录 。 

对 于 select_list ,指定 要 查询 的 结果 列 ,结果 列表 是 以 逗号 分 隔 的 一 系列 表达 式 。 

。 * ,表示 返回 在 FROM 子 句 中 包括 的 所 有 对 象 的 全 部 列 , 这 些 列 按 FROM 子 句 中 
指定 的 表 或 视图 顺序 返回 ,并 对 应 于 它们 在 表 或 视图 中 的 顺序 。 

。 ( table_name | view_name | table_alias )}. * : 指明 返回 指定 表 或 视图 的 全 部 列 。 

。 column_name: 指明 返回 的 列 名 。 

。 expression: 是 一 个 由 列 名 、 常 量 、 函 数 通过 操作 符 连 接 起 来 的 数据 表达 式 , 作 为 返 

回 结果 集中 的 一 列 。 

。 column_alias: 指明 用 以 代替 出 现在 结果 集中 的 列 名 或 表达 式 的 别名 。 

【 例 6-11】 假定 有 一 个 数据 表 student, 存 储 学 生 基 本 信息 ,包含 的 字段 有 sno( 学 号 )、 
sname( 姓 名 )、ssex (性 别 )、sbirthday (出 生年 月 )、sdept( 院 系 )。 一 个 学 生 选 课 数 据 表 
selcourse、 包 含 的 字段 有 sno( 学 号 ) ,coursecode( 课 程 代码 ) 、score( 考 试 成 绩 )。 对 数据 进行 
基本 查询 , 写 出 相应 的 SELECT 语句 。 

查询 1: 查询 所 有 学 生 的 基本 信息 ,查询 语句 为 : 


SELECT sno, sname, ssex, sbirthday, sdept FROM student 或 SELECT x FROM student 


查询 2: 查询 有 过 选课 记录 的 学 生 的 学 号 ,消除 取 值 重复 的 行 , 查 询 语句 为 ; 

SELECT DISTINCT sno FROM selcourse 

查询 3: 查询 所 有 学 生 的 学 号 、. 姓 名 和 所 在 系 , 并 修改 结果 集中 列 的 名 称 ,语句 如 下 : 
SELECT ' 学 号 ' = sno，' 姓 名 '= sname, sdept AS ' 院 系 ' FROM student 

(2) WHERE 子 句 与 条 件 查询 


查询 满足 指定 条 件 的 记录 可 以 通过 WHERE 子 句 实现 。WHERE 子 句 指定 数据 检索 
的 条 件 , 以 限制 返回 的 数据 行 ,其 语法 格式 如 下 : 


WHERE < search condition> 
search_condition 用 于 指定 查询 条 件 。WHERE 子 句 中 常用 的 查询 条 件 见 表 6-7 。 
表 6-7 常用 的 查询 条 件 




















查询 条 件 谓词 
比较 一 %>> 多 > 一 必 一 四 一 ,< 1 > < 
确定 范围 BETWEEN AND,NOT BETWEEN AND 
确定 集合 IN,NOT IN 
字符 匹配 LIKE,NOT LIKE 
空 值 IS NULL,IS NOT NULL 
多 重 条 件 AND,OR,NOT 





使 用 谓词 LIKE 进行 字符 串 的 匹配 ,其 一 般 的 语法 格式 如 下 : 
[ NOT ] LIKE '< 匹 配 串 >' 


其 含义 是 查找 指定 的 属性 列 值 与 < 匹配 串 > 相 匹配 的 记录 。< 匹 配 串 > 可 以 是 一 个 完整 
的 字符 串 ,也 可 以 含有 通配符 。 在 SQL Server 中 ,通配符 见 表 6-8。 























表 6-8 通配符 
通配符 功 能 实 例 
% 代表 零 或 多 个 字符 “sn% "表示 "sn" 后 可 接任 意 字符 串 ,常用 于 模糊 查询 
- 代表 一 个 任意 字符 “s_n” 表 示 “s” 与 “n” 之 间 可 以 有 一 个 字符 
也 | 表示 在 某 一 范围 内 的 字符 口 -9] 表 示 1~9 之 间 的 字符 
| 表示 不 在 某 一 范围 内 的 字符 [1-9] 表 示 不 在 1 一 9 之 间 的 字符 


需要 注意 的 是 ,如 果 使 用 WHERE 子 句 来 限制 查询 的 范围 , WHERE 子 句 必须 紧 跟 在 
FROM 子 句 之 后 。 下 面 是 一 组 简单 的 条 件 查询 的 例子 。 

【 例 6-12】 使 用 条 件 查 询 , 对 上 述 例子 中 的 数据 表 进 行 查询 。 

查询 1: 查询 性 别 为 “ 女 ” 的 学 生 的 学 号 、 姓 名 和 系 别 。 

SELECT sno, sname, sdept 


FROM student 
WHERE ssex = N' 女 ' 


查询 2: 查询 成 绩 在 80 到 100 之 间 的 学 生 及 课程 信息 。 
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SELECT # FROM sc 
WHERE grade BETWEEN 80 AND 100 


查询 3: 查询 出 生日 期 不 在 1990 年 到 1992 年 之 间 的 学 生 的 姓名 、 性 别 和 所 属 系 。 


SELECT sname, ssex, sdept 
FROM student 
WHERE sbirthday NOT BETWEEN '1990— 01— 01' AND '1992—-01— 01' 


查询 4: 查询 信 管 系 、 会 计 系 、 营 销 系 学 生 的 姓名 和 性 别 。 
SELECT Sname, Ssex 

FROM Student 

WHERE Sdept IN ( N' 信 管 系 ', N' 会 计 系 ',N' 营 销 系 '); 

查询 5: 查询 姓 " 张 "的 学 生 姓名 。 


SELECT sname 
FROM student 
WHERE sname LIKE N' 张 名 ' 


查询 6: 查询 信 管 系 的 女生 的 学 号 、 姓 名 。 

SELECT sno, sname 

FROM student 

WHERE sdept = N' 信 管 系 ' AND ssex=N' 女 ' 

(3) ORDER BY 子 句 与 排序 输出 

用 ORDER BY 子 名 对 查询 结果 按照 一 个 或 多 个 属性 列 的 升序 (ASC) 或 降序 (DESC) 
排列 , 空 值 被 视 为 最 低 的 可 能 值 。 

例如 : 查询 所 有 男生 的 学 号 、 姓 名 和 出 生日 期 ,并 按照 出 生日 期 降序 排列 ; 若 出 生日 期 
相同 , 则 按 学 号 升序 排列 。 则 SQL 语句 为 ， 

SELECT sno, sname, sbirthday 

FROM student 

WHERE ssex = N' 男 ' 

ORDER BY sbirthday DESC, sno 

3. 聚合 查询 

聚合 查询 是 指 通过 查询 对 一 组 数据 进行 聚合 运算 得 到 聚合 值 的 过 程 , 在 聚合 运算 中 主 
要 是 使 用 聚合 函数 。SQL Server 中 提供 了 许多 聚合 函数 ,常用 的 聚合 函数 见 表 6-9。 

表 6-9 常用 的 聚合 函数 




















函 数 功 能 
COUNT(LDISTINCT | ALL]*) 统计 记录 个 数 
COUNT([DISTINCT | ALIL]< 列 名 >) 统计 一 列 中 值 的 个 数 
SUM([DISTINCT | ALL]< 列 名 >) 计算 一 列 值 的 总 和 (此 列 必须 是 数值 型 ) 
AVG([DISTINCT | ALL]< 列 名 >) 计算 一 列 值 的 平均 值 (此 列 必须 是 数值 型 ) 
MAX([LDISTINCT | ALL]< 列 名 >) 求 一 列 值 中 的 最 大 值 
MIN(LDISTINCT | ALL]< 列 名 >) 求 一 列 值 中 的 最 小 值 





可 以 在 三 个 子 句 中 使 用 聚合 函数 , 即 SELECT 子 句 .COMPUTE 子 句 和 HAVING 子 
名 ,在 此 先 介 绍 如 何在 SELECT 子 句 和 COMPUTE 子 句 中 使 用 聚合 函数 。 

(1) SELECT 子 句 中 的 聚合 

在 SELECT 子 句 中 可 以 使 用 聚合 函数 进行 运算 ,运算 结果 作为 新 列 出 现在 结果 集中 。 
在 聚合 运算 的 表达 式 中 可 以 包括 列 名 常量 以 及 由 算术 运算 符 连 接 起 来 的 函数 。 下 面 是 一 
组 使 用 聚合 查询 的 示例 。 

查询 1: 统计 所 有 的 学 生 人 数 。 

SELECT COUNT( * ) AS 学 生 人 数 

FROM student 

查询 2: 统计 有 选课 记录 的 学 生 人 数 。 

SELECT COUNT(DISTINCT sno) AS 有 选课 记录 的 学 生 人 数 

FROM selcourse 

查询 3: 统计 选修 "ec01" 课 程 的 平均 成 绩 、 最 高 成 绩 和 最 低 成 绩 。 


SELECT AVG( score) AS c01 课程 的 平均 成 绩 ， 
MAX( score) RS c01 课程 的 最 高 成 绩 ， 
MIN(score) AS c01 课程 的 最 低 成 绩 

FROM selcourse 

WHERE cno = 'c01" 

(2) COMPUTE 子 句 中 的 聚合 

在 SELECT 子 句 中 出 现 肾 合 函 数 时 ,结果 集中 的 数据 全 是 聚合 值 ,没有 明细 值 。 
COMPUTE 子 句 不仅 可 以 使 用 聚合 函数 计算 聚合 值 .而且 可 以 依然 保持 原 有 的 明细 值 ,新 
的 聚合 值 作为 附加 的 汇总 列 出 现在 结果 集 的 最 后 。 需 要 注意 的 是 ,如 果 是 用 COMPUTE 
子 句 指定 的 行 聚合 函数 , 则 不 允许 它们 使 用 DISTINCT 关键 字 。 

例如 : 查询 信 管 系 学 生 的 学 号 .姓名 和 年 龄 ,最 后 汇总 出 该 系 学 生 的 总 人 数 和 平均 
年 龄 。 

SELECT sno, sname, Year(getdate( ) ) - year(sbirthday) as age 

FROM student 

WHERE sdept = N' 信 管 系 ' 

COMPUTE COUNT( sno), AVG(year(getdate( ) ) - year(sbirthday)) 

4. 分 组 查询 

GROUP BY 子 句 对 查询 结果 按照 一 定 条 件 进行 分 组 ,分 组 子 句 通常 与 SQL Server 提 
供 的 聚合 函数 一 起 使 用 。 对 查询 结果 分 组 的 目的 是 为 了 细 化 聚合 函数 的 作用 对 象 ,如 果 未 
对 查询 结果 分 组 , 则 聚合 函数 将 作用 于 整个 查询 结果 ,分 组 后 聚合 函数 将 作用 于 每 一 个 组 ， 
每 一 个 组 都 有 一 个 函数 值 。SELECT 语句 后 的 输出 列 只 能 是 聚合 函数 和 分 组 列 。 

如 果 分 组 后 还 需要 按 一 定 的 条 件 对 这 些 组 进行 筛选 ,最 终 只 输出 满足 指定 条 件 的 组 , 则 
可 以 使 用 HAVING 子 句 指定 筛选 条 件 。 

例如 : 统计 所 有 被 选 过 的 课程 的 课程 号 及 被 选 过 的 次 数 。 

SELECT cno, count( * ) RS 被 选 次 数 

FROM selcourse 
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GROUP BY cno 


如 果 要 统计 被 选 过 2 次 和 2 次 以 上 的 课程 的 课程 号 及 被 选 过 的 次 数 , 则 需要 使 用 
HAVING 子 句 ,代码 如 下 : 

SELECT cno, count( * ) RS 被 选 次 数 

FROM selcourse 

GROUP BY cno 

HRVING COUNT( * )>= 2 


5. 连接 查询 

前 面 的 查询 都 是 针对 一 个 表 进 行 的 , 若 一 个 查询 同时 涉及 两 个 或 两 个 以 上 的 表 , 并 且 每 
一 个 表 中 的 数据 往往 作为 一 个 单独 的 列 出 现在 结果 集中 , 称 之 为 连接 查询 。 

FROM 子 句 指定 需要 进行 数据 查询 的 表 ,语法 格式 如 下 : 


FROM < table_source > 


其 中 table_source 定义 为 : 


<table_source>: : = table name[[AS]table alias] | view name [[AS] view alias] 
| derived table [[AS] table alias] 
| <joined table> 
各 参数 说 明 如 下 : 
。 table_source, 指 明 SELECT 语句 所 使 用 的 表 、 视 图 等 数据 源 。 
。 table_name [ [ AS ] table_alias ] ,指明 表 名 和 表 的 别名 。 
view_name [ [ AS ] view_alias ] ,指明 视 图 名 和 视图 的 别名 。 
。 derived_table [ [ AS ] table_alias ], 是 从 指定 的 数据 库 和 表 中 检索 的 子 查询 结果 。 
joined_table, 指 明 由 连接 查询 生成 的 查询 结果 作 数 据 源 。 对 于 多 个 连接 ,可 使 用 圆 
括号 来 更 改 连接 的 自然 顺序 。 
根据 多 个 表 返 回 结果 集 的 处 理 不 同 ,连接 查询 又 分 为 以 下 几 种 情况 : 
(1) 交叉 连接 ,交叉 连接 不 使 用 任何 连接 条 件 来 限制 结果 集合 ,而 是 对 两 个 数据 源 中 的 
行 以 所 有 可 能 的 方式 进行 组 合 , 也 就 是 做 广义 稍 卡 儿 积 。 交 叉 连 接 在 查询 结果 集中 ,包含 了 
所 连接 的 两 个 表 中 所 有 行 的 全 部 组 合 , 其 结果 的 列 数 等 于 两 个 表 列 数 之 和 , 行 数 等 于 两 个 表 
行 数 之 积 。 
例如 : 对 student 表 和 course 表 做 交叉 连接 ,可 以 书写 下 面 的 SQL 语句 : 


SELECT student. x* ,course. xx FROM student, course 
也 可 以 用 JOIN 关键 字 表示 交 又 连接 ,将 上 述 语 句 写 为 : 
SELECT student. x* ,course. xx FROM student CROSS JOIN course 


(2) 内 连接 ,内 连接 是 用 比较 运算 符 比较 表 中 列 值 ,返回 符合 连接 条 件 的 数据 行 ,从 而 
将 两 个 表 连 接 成 一 个 新 表 。 内 连接 根据 不 同 的 情况 可 分 为 : 等 值 连接 ,在 连接 条 件 中 使 
用 等 号 ,通过 相等 的 字段 连接 起 来 的 查询 称 为 等 值 连接 。 加 自然 连接 , 若 在 等 值 连接 中 ,把 
目标 列 中 重复 的 字段 去 掉 则 称 为 自然 连接 : 它 是 一 种 特殊 的 等 值 连接 。@@ 非 等 值 连接 , 表 之 
间 的 连接 ,使 用 除了 ”一 "之 外 的 连接 符 连 接 起 来 的 查询 称 为 非 等 值 连 接 。 虽 然 SQL Server 





提供 了 非 等 值 连接 查询 ,但 非 等 值 连接 查询 的 例子 很 少 有 实际 应 用 价值 。 由 自 连接 ,连接 可 


以 是 一 个 表 与 其 自身 进行 的 ,这 样 的 连接 称 为 自 连接 。 


【 例 6-13】 根据 学 生 基 本 信息 表 和 选课 数据 表 , 查 询 工商 系 有 选课 记录 的 学 生 的 全 部 


信息 以 及 他 们 的 选课 信息 。 
分 析 : 查询 涉及 两 个 数据 表 , 需 要 使 用 连接 查询 。 
代码 如 下 : 


SELECT student. x* ,selcourse. * 
FROM student, selcourse 
WHERE student. sdept = N' 工 商 系 ' RND student. sno = selcourse. sno 


查询 结果 示例 如 图 6-16 所 示 。 






玄 工商 系 ”19910312000000000 2008002 c03 900 
女工 商 系 1991:0312000000000 2008002 c04 的 0 
女 工商 系 199307.05 000000000 2008005 c01 550 


图 6-16 查询 结果 示例 


【 例 6-14】 如 果 在 例 6-13 的 基础 上 再 增加 一 个 课程 数据 表 course, 包 含 cno( 课 程 编 


时 


7 


,cname( 课 程 名 ) 字 段 , 查 询 信 管 系 选修 “C 语言 课程 的 学 生 的 姓名 \ 课 程 名 和 成 绩 。 


分 析 : 现在 是 三 个 数据 表 的 查询 ,可 以 用 谓词 表示 等 值 连接 ,也 可 以 用 JOIN 关键 字 表 


示 等 值 连接 。SQL 语句 如 下 : 
Q@ 用 谓词 表示 等 值 连接 
SELECT sname, cname, grade 
FROM student S, course C, selcourse 


WHERE S. sno = selcourse. sno AND C.cno= selcourse.cno 
RND sdept = N' 信 管 系 'AND cname = N'C 语言 ' 


@ 用 JOIN 关键 字 表示 等 值 连接 


SELECT sname, cname, score 
FROM Student S JOIN selcourse SC JOIN course C ON sc. cno = c. cno ON s. sno = sc.sno 
WHERE sdept = N' 信 管 系 'AND cname = N'C 语 言 ' 


(3) 外 连接 ,前面 内 连接 所 举 的 例子 中 ,连接 的 结果 是 从 多 个 表 的 组 合 中 筛选 出 符合 连 
接 条 件 的 数据 ,如 果 数据 无 法 满足 连接 条 件 , 则 将 其 丢弃 。 但 是 外 连接 则 不 然 ,在 外 连接 中 ， 
不 仅 包括 那些 满足 条 件 的 数据 ,而 且 某 些 表 不 满足 条 件 的 数据 也 会 显示 在 结果 集中 。 也 就 


是 说 ,外 连接 只 限制 其 中 一 个 表 的 数据 行 ,而 不 限制 另外 一 个 表 中 的 数据 。 


外 连接 只 能 用 于 两 个 表 中 ,两 个 表 有 主 次 之 分 ,以 主 表 的 每 行 数据 去 匹配 从 表 的 数 
据 列 ,符合 连接 条 件 的 数据 将 直接 返回 到 结果 集中 ,对 那些 不 符合 连接 条 件 的 列 将 被 赋 
予 NULL 值 后 再 返回 到 结果 集中 。 根 据 两 个 表 的 主 次 关系 ,外 连接 分 为 左 外 连接 、 右 外 
连接 、 完 全 外 连接 。 外 连接 形式 在 许多 情况 下 是 非常 有 用 的 ,例如 : 在 连锁 超市 统计 报表 
时 ,不 仅 要 统计 那些 有 销售 量 的 超市 和 商品 ,而 且 还 要 统计 那些 没有 销售 量 的 超市 和 


商品 。 
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6. 谋 套 查询 

一 个 SELECT-FROM-WHERE 语句 称 为 一 个 查询 块 ,有 时 一 个 查询 块 无 法 完成 查询 
任务 ,需要 一 个 子 查询 块 的 结果 作为 父 查询 块 的 条 件 。 将 一 个 查询 块 嵌 套 在 另 一 个 查询 块 
的 条 件 子 句 中 的 查询 称 为 嵌 套 查询 。 赃 套 查 询 使 我 们 可 以 用 多 个 简单 查询 构成 复杂 的 查 
询 , 从 而 增强 查询 功能 。 

例如 : 查询 选 过 “c01” 号 课程 的 学 生 的 学 号 、 姓 名 和 所 在 院 系 。 

SELECT sno, sname, sdept 


FROM student 
WHERE sno IN (SELECT sno FROM sc WHERE cno = 'c01') 


7. 组 合 查询 

查询 语句 的 结果 集 往 往 是 一 个 包含 了 多 行 数据 的 集合 。 集 合 之 间 可 以 进行 并 (UNION)、 
交 (EXCEPT) 、 差 (INTERSECT) 等 运算 。 在 进行 集合 运算 时 ,所 有 查询 语句 中 列 的 数量 和 
顺序 必须 相同 , 且 数 据 类 型 必须 兼容 。 

例如 : 查询 所 有 的 男生 和 信 管 系 的 学 生 的 姓名 .性 别 和 所 在 系 , 使 用 UNION 操作 符 。 


查询 语句 如 下 : 

SELECT sname, ssex, sdept FROM student WHERE ssex = N' 男 ' 
UNION 

SELECT sname, ssex, sdept FROM student WHERE sdept = N' 信 管 系 ' 
8. 数据 的 插入 


在 Transact-SQL 中 ,数据 插入 语句 INSERT 有 两 种 形式 : 一 种 是 插入 一 条 记录 , 另 一 
种 是 插入 子 查询 结果 。 向 表 中 插入 数据 时 要 注意 ,数字 数据 可 以 直接 插入 ,但 是 字符 数据 和 
日 期 数据 要 使 用 单 引号 (必须 是 英文 半角 输入 状态 下 的 单 引号 ) 括 起 来 。 如 果 是 Unicode 数 
据 , 应 该 在 字符 数据 的 引号 前 使 用 大 写字 母 N。 

(1) 插入 一 条 记录 

插入 一 条 记录 的 语法 格式 如 下 : 

INSERT 

INTO [database name. ] <table name > [ ( <column name>[,...n])] 

VALUES (< constant> [,...n ]) 

各 参数 说 明 如 下 : 

。 database_name: 指定 向 哪个 数据 库 插入 数据 ,如 果 省 略 , 即 指 当 前 连接 的 数据 库 。 

。 table_name: 指定 向 哪个 表 插 入 数据 。 

。 column_name: 表 中 的 列 名 , 当 指 定 VALUES 的 全 部 数据 时 可 省 略 ; 如 果 指 定 了 

column_name, 则 没有 出 现在 子 句 中 的 column_name 将 取 NULL。 
。 constant: 插入 的 数据 值 。 
例如 ,向 student 数据 表 插入 一 条 记录 ,INSERT 语句 如 下 : 


INSERT INTO student( sno, sname) 
VALUES ('201125011001',N' 许 宏 ') 


如 果 INTO 子 句 中 没有 任何 列 名 , 则 VALUE 子 句 后 列 值 顺序 必须 与 表 结 构 的 列 顺序 


一 致 。 
(2) 插入 子 查询 结果 
该 语句 可 以 将 多 条 满足 条 件 的 记录 添加 到 目的 数据 表 中 , 即 一 次 插入 多 条 记录 。 插 和 人 
子 查询 结果 的 语法 格式 如 下 : 

INSERT 


INTO [database name. ] <table name > [ (< column_name> [,…n])] 
SELECT < select list> 


各 参数 说 明 如 下 : 

。 database_name: 指定 向 哪个 数据 库 插 入 数据 。 

。 table_name: 指定 向 哪个 表 插入 数据 。 

。 column_name: 表 中 的 列 名 。 

。 select_list: SELECT 查询 结果 。 

例如 ,假设 已 建立 sc_2011 表 , 其 表 结 构 与 sc 表 结 构 一 致 。 将 学 号 为 201125011001 的 
同学 的 各 科 成 绩 添加 到 sc_2008002 表 中 ,插入 语句 如 下 : 

INSERT INTO sc 2011 

SELECT sno, cno, grade 


FROM selcourse 
WHERE sno = '201125011001" 


需要 注意 的 是 ,标识 字段 可 以 设 定 自动 加 1, 此 时 ,在 插入 记录 时 不 能 为 标识 字段 赋值 。 
还 要 注意 数据 表 的 结构 定义 ,如 果 有 些 字段 不 能 为 空 , 则 插入 记录 时 必须 指定 取 值 。 

9. 修改 数据 记录 

要 更 新 表 中 已 经 存在 的 数据 需 使 用 UPDATE 语句 。UPDATE 语句 可 以 一 次 更 新 一 
行 数据 、 多 行 数据 ,甚至 可 以 一 次 更 新 表 中 的 全 部 数据 行 。UPDATE 语句 语法 格式 如 下 : 

UPDATE [ database name. ] < table name > 


SET {<column name> = <expression>}[ ,...n ] 
[WHERE < search condition >] 


各 参数 说 明 如 下 : 

。 database_name: 指定 修改 的 数据 所 属 的 数据 库 。 

。 table_name: 指定 修改 的 数据 所 属 的 表 。 

。 column_name: 表 中 的 列 名 。 

。 expression: 用 表达 式 值 取代 相应 属性 的 列 值 。 

。 search_condition: 指定 修改 条 件 , 即 修改 符合 条 件 的 列 值 。 若 省 略 WHERE 子 句 ， 

则 将 更 新 表 中 所 有 记录 。 

【 例 6-15】 修改 student 表 中 的 数据 .将 201125011001 号 同学 的 名 字 改 为 “ 许 小 雅 ”， 
性 别 改 为 “ 女 ”, 成 绩 加 10 分 。 

UPDATE student 


SET sname = N' 许 小 雅 '，sname = N' 女 ',grade = grade + 10 
WHERE sno = '201125011001" 
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10. 删除 数据 记录 

从 表 中 删除 一 行 或 多 行 记录 需 使 用 DELETE 语句 。DELETE 语句 语法 如 下 : 

DELETE FROM [database_name. ] <table_name > 

[WHERE < search condition >] 

各 参数 说 明 如 下 : 

。 database_name: 指定 删除 记录 的 表 所 属 的 数据 库 。 

。 table_name: 指定 删除 的 记录 所 属 的 表 。 

。 search_condition: 指定 删除 条 件 , 即 删除 符合 条 件 的 记录 , 若 省 略 WHERE, 则 默认 
删除 所 有 记录 。 

例如 ,要 删除 student 数据 表 中 的 2008 级 所 有 学 生 的 记录 ,语句 为 : 

DELETE FROM student 

WHERE sno LIKE '2008[0- 9][0-9]s， 

假设 学 号 的 编码 规则 是 : 年 级 (4 位 ) 十 专业 (2 位 ) 十 序号 (多 位 ) ,条 件 中 的 序号 位 数 不 

确定 。 


6.5.4 数据 库 操作 


在 Web 应 用 开发 中 ,通常 需要 对 数据 库 进行 操作 ,包括 数据 库 的 查询 ,修改 、 择 入 、 删 除 
等 。 对 数据 库 的 操作 ,可 以 直接 在 JSP 页 面 中 完成 ,也 可 以 将 数据 库 操作 编写 成 一 个 
JavaBean, 然 后 在 JSP 页 面 中 调用 。 

1. 数据 库 操 作 的 基本 步 又 

对 数据 库 的 操作 ,可 以 分 成 以 下 4 个 基本 步骤 ,具体 说 明 如 下 : 

(1) 加 载 数据 库 驱 动 程序 , 即 JVM 查找 数据 库 驱动 程序 ,加 载 到 JVM 中 ,并 执行 该 类 
的 静态 代码 段 , 完 成 类 的 初始 化 。 加 载 数 据 库 驱 动 的 方法 有 多 种 ,不同 的 数据 库 系统 ,加 载 
数据 库 驱 动 使 用 的 参数 不 同 。 例 如 : 加 载 MySQL 了 驱动 程序 常用 的 方法 是 : 

String sDBDriver = "com. mysql. jdbc. Driver"; 

try { 


Class. forName( sDBDriver); 


} 

不 同 的 数据 库 服务 器 ,加 载 驱动 程序 方法 Class. forName 的 参数 不 同 ,例如 : 加 载 
SQLServer 驱动 ,数据 库 驱 动 器 参数 为 "com. microsoft. sqlserver. jdbc. SQLServerDriver"， 
加 载 Oracle 驱动 ,参数 为 "oracle. jdbc. driver. OracleDriver"。 


(2) 连接 数据 库 服务 器 , 当 加 载 了 数据 库 驱动 后 , 接 下 来 就 可 以 建立 到 数据 库 的 连接 
了 。 连 接 数据 库 所 使 用 的 方法 是 DriverManager. getConnection() ,一 般 形式 是 : 


conn = DriverManager.getConnection(url, user, password); 
不 同 的 数据 库 系 统 , 参 数 的 设置 不 同 。 例 如 : 对 于 MySQL 服务 器 系统 ,url 的 设置 为 : 


"jdbc:mysql://localhost:3306/ 数 据 库 名 "。 对 于 MS SQL Server 服务 器 系统 ,所 使 用 的 
url 参数 为 "jdbc:sqlserver://localhost:1433;DatabaseName 王 数据 库 名 "。 


(3) 创建 Statement 对 象 ,并 设置 数据 集 游标 类 型 与 操作 权限 。 在 执行 具体 的 数据 库 





SQL 命令 以 前 ,需要 创建 Statement 对 象 ,并 设置 数据 集 游标 类 型 与 操作 权限 (也 可 以 省 略 
不 写 ,采用 默认 值 ) ,一 般 形式 是 : 

Statement stmt = conn.createStatement(" 游 标 类 型 ", "记录 更 新 权限 "); 

Q@ 可 设置 的 游标 类 型 

。 ResultSet. TYPE_FORWORD_ONLY ,只 可 以 向 前 移动 。 

。 ResultSet. TYPE_SCROLL_INSENSITIVE, 可 卷 动 ,不 受 其 他 用 户 对 数据 库 更 改 


的 影响 。 
。 ResultSet. TYPE_SCROLL_SENSITIVE. 可 卷 动 , 当 其 他 用 户 更 改 数据 库 时 这 个 记 
@ 记录 更 新 权限 


。 ResultSet. CONCUR_READ_ONLY ,只 读 。 
。 ResultSet. CONCUR_UPDATABLE ,可 更 新 。 
例如 ,要 对 数据 表 进 行 查询 操作 ,语句 为 : 
Statement stmt = conn.createStatement(ResultSet.TYPE SCROLL INSENSITIVE, 
ResultSet. CONCUR_READ ONLY); 

(4) 数据 的 查询 \ 插 入、 修改 与 删除 , 当 stmt 对 象 创建 后 , 即 可 调用 Statement 对 象 的 
executeQuery() 方 法 和 executeUpdate() 方 法 ,利用 SQL 命令 ,来 实现 数据 库 数据 表 的 查 
询 、 插 入 、 修 改 与 删除 操作 。 

2. 数据 库 查 询 操作 

在 数据 库 中 查询 数据 ,是 通过 Statement 对 象 的 executeQuery() 方 法 实现 的 ,运行 结果 
返回 一 个 ResultSet 数据 集 。 一 般 形式 如 下 : 


ResultSet rs = stmt. executeQuery(strSQL); 


其 中 ,strSQL 为 一 个 SELECT 形式 的 SQL 命令 .具体 命令 根据 程序 的 功能 书写 。 命 
令 执 行 结果 为 查询 结果 数据 集 。 然 后 可 以 通过 rs. getString( ) 等 方法 来 取得 各 个 列 的 
数据 。 

(1) 在 结果 数据 集中 定位 数据 记录 

如 果 ResultSet 是 可 卷 动 的 ,可 以 使 用 下 列 ResultSet 方法 来 定位 数据 记录 : 

。 boolean rs. absolute(int row) ,绝对 位 置 , 负 数 表示 从 后 面 数 。 

。 void rs. first() ,将 指针 移动 到 结果 集 的 第 一 行 。 

。 void rs. last() ,将 指针 移动 到 结果 集 的 最 后 一 行 。 

。 boolean rs. previous() ,将 指针 移动 到 当前 行 的 前 一 行 。 

。 boolean rs. next() ,将 指针 移动 到 当前 行 的 下 一 行 。 

。 void rs. beforeFirst() ,将 指针 移动 到 结果 集 的 头 部 , 即 第 一 条 之 前 。 

。 void rs. afterLast() ,将 指针 移动 到 结果 集 的 末尾 , 即 最 后 一 条 记录 之 后 。 

。 boolean rs. isFirst() ,boolean rs. isLast() ,boolean rs. isBeforeFirst() ,boolean rs. 
isAfterLast 用 于 判断 当前 的 位 置 。 

需要 特别 说 明 的 是 , 刚 打开 数据 表 时 ,指针 处 于 第 一 条 记录 之 前 。 
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(2) 获得 数据 库 数据 
通过 ResultSet 中 的 get 方 法 可 以 取得 数据 表 中 当前 记录 的 相应 列 值 。 表 6-10 是 常用 
的 一 组 方法 。 
表 6-10 ”从 ResultSet 中 获取 数据 的 方法 









































SQL 类 型 说 明 JSP 类 型 ResultSet 方 法 
ola Unicode 字符 串 数据 类 型 String String getString( col) 
nvarchar, ntext 
char,varchar, text | 非 Unicode 字符 串 数据 类 型 |String String getString( col) 
binary, varbinary eo "一 进 byte[ ] byte[ | getBytes(col) 
bit 整数 数据 类 型 , 取 值 为 1、0 Boolean boolean getBoolean( col) 
或 NULL 

tinyint 1 字 节 Integer byte getByte(col) 

smallint 2 字 节 Integer short getShort(col) 

integer 4 字 节 Integer int getInt(col) 

bigint 8 字 节 Long long getLong( col) 
定点 小 数 数据 类 型 ,m 是 十 

decimal[(m[ ,dj)]」 | 进 制 数字 的 总 个 数 ,d 是 小 数 | String String getString( col) 
点 后 面 的 数字 个 数 

real(m,d) 单 精度 洗 点 型 ,8 位 精度 (4 字 Float float getFloat(col) 
节 ) 

float(m,d) 双 精 度 洁 涡 型， 1 从 本 民品 Double double getDouble(col) 
字 节 ) 

和 日 期 和 时 间 数据 类 型 String String getString(col) 

java. util. Date Date | java. sql. Date getDate(col) 

货币 数据 类 型 .默认 为 2 位 小 

money,smallmoney | 数 的 decimal 类 型 。money 占 | String String getString( col) 
8 字 节 ,smallmoney 占 4 字 节 











在 上 述 关 于 数值 的 类 型 中 ,decimal(m,d) 为 定点 小 数 类 型 ,定点 类 型 在 数据 库 中 存放 
的 是 精确 值 。 参 数 m 是 定点 类 型 数字 的 最 大 个 数 ( 精 度 ) ,范围 为 0 一 65,d 为 小 数 点 右 侧 数 
字 的 个 数 ,范围 为 0 一 30, 但 不 得 超过 m。 对 定点 数 的 计算 能 精确 到 65 位 数字 。 

浮 点 型 小 数 分 为 单 精度 float 和 双 精 度 double 型 ,参数 m 只 影响 显示 效果 ,不 影响 精度 ,d 
却 不 同 ,会 影响 到 精度 。 比 如 , 设 一 个 字段 定义 为 float(5.3) ,如 果 插 入 一 个 数 123. 45678 ,实际 
数据 库 里 存 的 是 123. 457 ,小数点 后 面 的 数 则 四 舍 五 人 截 成 457 了 ,但 总 个 数 不 受 到 限制 
(6 位 ,超过 了 定义 的 5 位 )。 因 此 ,在 定义 类 似 价格 等 精确 数据 时 ,使 用 浮 点 型 小 数 时 候 需 
要 特别 注意 。 

对 于 SQL 中 的 Datetime 类 型 列 值 , 在 JSP 中 可 以 通过 getString() 取 得 对 应 的 日 期 数 
据 , 并 在 日 期 和 String 之 间 自 动 转换 。 对 于 decimal、money 和 smallmoney 等 数值 型 数据 
字段 ,ResultSet 类 中 没有 对 应 的 getXXX 方法 读 取 数据 表 字 段 的 值 ,可 以 使 用 getString() 
返回 一 个 String 对 象 , 然 后 在 String 和 数值 间 转 换 。 

对 于 数据 库 中 longvarchar 和 langvarbinary 类 型 的 数据 字段 ,应 进行 流 操 作 , 这 里 不 再 

















具体 介绍 。 

3. 更 新 数据 库 

对 数据 库 的 更 新 ,可 以 采用 下 述 方法 : 

(1) stmt. executeUpdate ( "strSql") 方法 , strSql 是 一 条 SQL 更 新 语句 。 执 行 
UPDATE,INSERT 和 DELETE 操作 ,返回 影响 到 的 条 数 。 用 户 通 过 返回 值 ,可 以 判断 数 
据 库 操作 是 否 成 功 。 

例如 : 试图 插入 一 条 记录 ,而 该 记录 的 主 关键 字 已 经 在 数据 表 中 存在 ,此 时 则 返回 0, 即 
插 人 不 成 功 。 灵 活 使 用 主 关键 字 定义 可 以 避免 插入 重复 记录 ,而 不 必 在 插入 前 首先 查询 记 
录 是 否 存 在 ,节省 操作 时 间 。 

(2) stmt. execute() 方 法 ,在 不 知道 SQL 语句 是 查询 还 是 更 新 的 时 候 使 用 该 方法 。 如 果 产 
生 一 条 以 上 的 对 象 时 ,返回 true, 此 时 可 用 stmt. getResultSet() 和 stmt. getUpdateCount() 来 获 
取 execute 结果 ,如 果 不 返 回 ResultSet 对 象 则 返回 false。 

除了 Statement 的 executeUpdate 之 外 还 可 以 用 ResultSet 来 更 新 数据 库 , 例 如 : 

rs. updateInt (1,10); 


rs. updateString(2, "xxx"); 
rs. updateRow( ); 


4. 使 用 预 编译 PreparedStatement 

PreparedStatement 对 象 和 Statement 对 象 类 似 , 都 可 以 用 来 执行 SQL 语句 。 但 是 ,通过 
PreparedStatement 对 象 执 行 SQL 语句 的 速度 更 快 。 因 为 数据 库 会 对 PreparedStatement 的 
SQL 语句 进行 预 编译 ,而 且 仍 旧 能 输入 参数 并 重复 执行 ,编译 好 的 查询 速度 比 未 编译 的 
要 快 。 

例如 : 

PreparedStatement stmt = conn. preparedStatement ( " INSERT INTO users (userid, username ) 

values(?,?)"); 

stmt. clearParameters( ); 

stmt. setInt(1,2); 

stmt. setString(2, "xxx" ); 

stmt. executeUpdate( ); 


6.5.5 数据 库 编程 举例 


在 学 习 了 数据 库 服 务 器 JDBC 后 ,我 们 通过 一 个 例子 来 讲解 通过 JSP 页 面 实现 数据 的 
操作 。 在 介绍 具体 的 例子 以 前 ,我 们 首先 讲解 在 MyEclipse 中 如 何 将 JSP 和 MySQL 数据 
库 服 务 器 连接 起 来 , 即 如 何 配 置 MySQL 的 JDBC 驱动 程序 ,以 实现 JSP 对 数据 库 的 访问 。 

首先 ,从 MySQL 官方 网 站 (http://www. mysql. com/) 下 载 MySQL 数据 库 的 JDBC 
驱动 程序 , 即 JDBC Connectors/J ,下 载 后 的 文件 通常 是 . zip 或 . gz 压缩 文件 。 用 RAR 解压 
缩 工具 将 下 载 的 文件 解压 缩 ,得 到 JDBC Connector 接口 程序 的 JAR 包 。 然 后 ,在 
MyEclipse 中 添加 MySQL Connector 驱动 程序 JAR 包 , 并 添加 到 环境 变量 中 ,具体 操作 
如 下 : 

(1) 运行 MyEclipse, 新 建 Java Project 工程 TestJDBC。 在 工程 节点 右 击 , 在 快捷 菜 
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单 ,执行 New 一 Folder 命令 ,新 建文 件 夹 lib。 将 下 载 的 MySQL Connector 驱动 程序 JAR 
包 , 例 如 mysql-connector-java-5. 1. 40-bin. jar 复制 到 该 文件 夹 。 
(2) 在 lib 节 点 中 的 驱动 程序 项 上 右 击 ,执行 Bulid Path>Add to Bulid Path 命令 ,将 驱 
动 程序 添加 到 操作 系统 环境 变量 中 。 
(3) 编写 Java 程序 ,访问 数据 库 。 在 MyEclipse 中 ,新 建 一 个 Java 类 ,代码 清单 如 下 : 
package hao. db; 
import java. sql.DriverManager; 
import java. sql.Connection; 
import java. sql. Statement; 
import java. sql.ResultSet; 
public class TestDB { 
private static final String url = "jdbc:mysql://localhost :3306/testdb"; 
private static final String user = "root"; 
private static final String password = "mysnoopy365"; 


public static void main(String[ ] args) throws Exception { 
//(1) 加 载 MysQL 驱动 , 即 JVM 查找 并 加 载 指定 的 类 
Class. forName("com.mysql. jdbc. Driver" ); 
//(2) 连 接 数据 库 


Connection conn = DriverManager. getConnection(url,user, password) ; 

//(3) 通 过 数据 库 连 接 操作 数据 库 , 实 现 数据 库 增 删改 查 

Statement stmt = conn. createStatement( ); 

ResultSet rs = stmt. executeQuery("SELECT username, userage FROM message" ) ; 
while(rs. next()) 

{ 

System. out. println(rs. getString("username") +","+rs.getInt("userage")); 
kL 

//(4) 断 开 数据 库 连 接 


conn.close( ); 


} 


在 MyEclipse 编程 环境 ,在 输入 Java 代码 的 过 程 中 ,通常 需要 按 Alt 十 /组 合 键 打 开 代 
码 提示 窗口 ,帮助 正确 地 输入 和 处 理 错误 。 例 如 ,一 个 普通 类 ,要 增加 main 方法 ,但 main 方 
法 原型 可 能 记 不 住 ,此 时 ,在 输入 main 函数 名 后 , 按 Alt 十 /组 合 键 , 则 打开 代码 提示 窗口 ， 
显示 main 函数 原型 ,选择 即 可 。 

在 编写 Java 代码 时 ,对 于 方法 抛 出 的 可 查 异 常 ,编译 器 要 求 必 须 处 理 或 在 调用 函数 中 
进一步 抛 出 异常 ,否则 编译 不 能 通过 。 例 如 ,在 上 述 代 码 中 ,JDBC 进行 数据 库 操 作 编程 ,大 
多 数 方法 会 抛 出 可 查 异 常 SQLException ,编译 器 要 求 必 须 处 理 这 类 异常 ,或 在 调用 函数 进 
一 步 抛 出 异常 。 此 处 ,为 了 突出 数据 库 操作 ,对 采用 main 方法 中 的 语句 抛 出 的 异常 没有 捕 
获 处 理 , 而 是 在 main 方法 抛 出 异常 ,以 满足 Java 编译 的 要 求 。 

除了 编写 Java 类 访问 数据 库 外 ,还 可 以 在 JSP 服务 器 页 中 ,直接 书写 Java 代码 ,实现 
对 数据 库 的 访问 ,例如 : 从 数据 库 服务 器 获得 信息 ,然后 以 HTML 页 面 的 形式 返 给 客户 浏 
览 器 。 下 面 举 例 说 明 在 JSP 中 访问 My SQL Server 数据 库 的 方法 。 

【 例 6-16】 编写 一 个 JSP 页 面 ,完成 系统 用 户 账户 数据 的 操作 ,包括 账户 分 页 列表 、 账 
户 详情 、 查 询 、 修 改 、 删 除 等 操作 。 

分 析 : 在 Web 系统 中 ,用 户 账户 管理 是 系统 的 基本 功能 ,包括 用 户 账户 的 添加 \ 修 改 、 


删除 查询、 列表 等 。 通 常情 况 下 ,因为 账户 数量 可 能 很 多 , 常 采用 分 页 浏览 方式 显示 账户 列 
表 , 在 浏览 页 面 , 提 供 查询 、 添 加 、 修 改 、 删 除 以 及 导入 导出 操作 。 
(1) 创建 用 户 账 户 数据 表 useraccounts ,数据 存储 在 站 点 系统 数据 库 gsl 中 ,数据 表 结 





构 定 义 见 表 6-11。 


表 6-11 用 户 账户 数据 表 useraccounts 表 结 构 定 义 





























列 名 数据 类 型 (精度 范围 ) 空 / 非 空 约束 条 件 
useraccount varchar(20) NOT NULL 主键 
password varchar(45) NOT NULL 
truename varchar(45) NOT NULL 
sex varchar(4) NULL 
nickname varchar(45) NULL 
userrole varchar(45) NULL 
usergrouplist varchar(45) NULL 
accountstate varchar(45) NULL 
workunit varchar(45) NULL 











在 useraccounts 数据 表 中 ,定义 了 标识 字段 id 为 int, 并 且 设 标识 识别 规范 为 : 是 ,标识 
增 量 为 1。 在 数据 表 中 ,标识 字段 的 功能 和 主 关键 字 类 似 , 也 可 以 唯一 地 定位 一 条 记录 ,但 
标识 字段 的 值 不 需要 用 户 输入 或 导入 , 它 的 值 自动 生成 。 但 是 主 关键 字 的 取 值 必须 由 用 户 


输入 ,不 能 为 空 , 如 果 要 导入 数据 表 , 也 需要 为 每 条 记录 给 定 主 关键 字 的 值 。 


(2) 为 了 便于 代码 的 重用 ,我 们 定义 一 个 数据 库 操作 的 JavaBean。 在 WEB-INF\ 
classes\pub 文件 夹 下 ,创建 一 个 名 为 haodbgsl. java 的 文件 ,定义 一 个 JavaBean, 封 装 有 关 
数据 库 gsl 操作 中 的 数据 库 连 接 、 查 询 .数据 更 新 以 及 断 开 数 据 库 连 接 操 作 , 代 码 清 单 如 下 : 


package pub; 


import java. sql.DriverManager; 


import java. sql.Connection; 


import java. sql. SQLException; 


import java. sql. Statement; 


import java. sql. ResultSet; 


public class haodbgs] { 


private static final String url = "jdbc:mysql://localhost:3306/testdb"; 
private static final String user = "root"; 


private static final String password = "mysnoopy365"; 


private Connection conn = null; 


private Statement stmt = null; 


private ResultSet rs = null; 
// 默 认 构 造 函 数 , 加 载 JDBC 驱动 程序 
public haodbgsl() { 


tixyt 


Class. forName( "com. mysql. jdbc. Driver" ); 


| 


catch(Exception e) { 


System. err. println(" 加 载 数 据 库 驱 动 异常 : " + e. getMessage()); 
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} 
// 建 立 数据 库 连接 ,创建 用 于 连接 数据 库 的 Connection 对 象 
public static Connection getConnection() { 
Connection conn = null; 
try { 
conn = DriverManager. getConnection(url,user,password); 
} catch (Exception e) { 
System. out. println( "建立 数据 库 连 接 异 常 :”+ e. getMessage()); 
于 
return conn; 
} 
public static Statement getStatement(Connection conn) { 
Statement st = null; 
try { 
st = conn. createStatement( ); 
} catch (SQLException e) { 
e. printStackTrace( ); 
} 
return st; 
} 
// 返 回 符合 条 件 的 记录 数 
// 查 询 条 件 一 般 为 : strsQLCount = "SELECT COUNT( x ) RS nums FROM 数据 表 " 
public int executeCount(String sql) { 
rs = null; 
int nums = 0; 
try { 
conn = haodbgs1. getConnection(); 
stmt = conn.createStatement(); 
rs = stmt.executeQuery(sql); 
rs.next(); 
nums = rs.getInt(1); 
} catch (SQLException ex) { 
System. err. println( "executeQuery: ”+ ex.getMessage()); 
i 
return nums; 
. 
// 返 回 符合 条 件 的 记录 
public ResultSet executeQuery(String sql) { 
rs = null; 
try { 
conn = haodbgs1. getConnection(); 
stmt = conn.createStatement(); 
rs = stmt.executeQuery(sql); 
} catch (SQLException ex) { 
System. err. println("executeQuery: " + ex.getMessage()); 
, 
return rs; 
} 
// 返 回 符合 条 件 的 记录 集合 中 的 第 pagenum 页 的 记录 
public ResultSet executeQueryList(String sql, int pagenums, int 


numsperpage) { 
int startpos = (pagenums — 1) * numsperpage ; 
sql += " LIMIT" + startpos +"," + numsperpage; 
rs = null; 
try { 
conn = haodbgs1. getConnection(); 
stmt = conn.createStatement(); 
rs = stmt.executeQuery(sql); 
} catch (SOLException ex) { 
System. err. println("aq. executeQuery: ”+ ex.getMessage()); 
: 
return rs; 
} 
// 修 改 数 据 记 录 , 返回 修改 的 记录 条 数 
public int executeUpdate(String sql) { 
int returnVal = - 999; 
try { 
conn = haodbgs1. getConnection(); 
stmt = conn.createStatement(); 
returnVal = stmt. executeUpdate( sql); 
} catch (SQLException ex) { 
System. err. println("executeUpdate: " + ex.getMessage()); 
|， 
return returnVal; 
} 
// 断 开 数 据 库 连 接 
public void disconnectToDB() throws java. sql. SQLException { 
if (rs != null) { 
rs.close(); 
， 
if (conn != null) { 
conn. close() 
if (stmt != null) { 
stmt. close( ); 


. 


} 


在 这 个 Javabean 中 ,在 构造 函数 中 完成 MySQL 数据 库 jdbc 驱动 的 加 载 , 男 外 定义 了 
多 个 公有 (public) 方 法 来 操作 数据 库 , 包 括 进 行 数据 记录 的 查询 和 更 新 、 关 闭 数据 库 连接 。 
此 外 ,还 定义 了 两 个 static 类 成 员 函 数 , 将 JDBC 编程 的 关键 步骤 分 开 , 以 便于 异常 处 理 。 

在 MyEclipse 中 ,新 建 一 个 类 haodbgsl, 输 入 上 述 代码 , 则 文件 保存 在 src/pub 包 中 , 编 
译 后 的 . class 文件 存储 在 Web 应 用 根 目 录 下 的 WEB-INF\classes\pub 文件 夹 下 ,文件 名 为 
haodbgsl. class, 该 JavaBean 的 . class 文件 即 可 在 JSP 页 面 中 被 调用 。 

(3) 在 JSP 中 使 用 JavaBean。 下 面 是 用 户 账 户 数 据 表 分 页 浏览 页 面 ,文件 名 为 
accounts-listpage. jsp, 其 功能 是 分 页 显示 accounts 数据 表 中 的 用 户 账户 信息 。 为 了 更 好 地 
模块 化 ,把 一 些 公共 的 部 分 提取 出 来 ,保存 为 独立 的 文件 , 供 其 他 页 面 调用 .。 
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代码 清单 (accounts-listpage.jsp) 如 下 : 


<%(@ page pageEncoding = "GBK" %> 
<%(@ page import = "java. sql. *" %> 
<jsp:useBean id= "gsl" scope = "page" class = "pub. haodbgs]1l" /> 
<%! 
ResultSet rs = null; 
int rowscount, i; 
int numsperpage = 10, pagecount = 0, pagenum = 0, gopage = 0; 
String myuserrole, pagenumstr, gopagestr; 
String strposition, strfunction, strhelpwords; 
> 
< 
myuserrole = (String)session. getAttribute( "userrole"); 
pagenumstr = request. getParameter("page" ); 
gopagestr = request. getParameter( "gopage" ); 
// 没 有 单 击 " 转 到 "按钮 ,不 上 传 文本 框 输入 ,gopagestr 为 nu11, 否则 计算 " 转 到 "页 码 的 值 
if (gopagestr == null) 
gopagestr = "0"; 
gopage = java. lang. Integer. parseInt (gopagestr); 
// 求 href 参数 中 page 参数 的 值 ,如 果 未 指定 page 参数 , 则 page == nul1 
if(pagenumstr == null) 
pagenumstr = "1"; 
pagenum = java. lang. Integer. parseInt (pagenumstr); 
if (gopage > 0) 
pagenum = gopage; 
%> 
<html > 
<head> 
<meta http - equiv= "Content - Type" content = "text/html; charset = gb2312"> 





<1link href ="../pubcss/common. css" rel = "stylesheet" type= "text/css"/> 
<script src="../pubjs/tablelist. js"></script > 

<script src="../pubjs/jquery. min. js"></script > 

</head > 

<body> 

<% 


strposition = "系统 用 户 账号 管理 > "; 

strfunction = "账号 列表 "; 

strhelpwords = “该 列表 列 出 了 所 有 账号 信息 ."; 

%> 

<%@ include file= "pubpro/pagetop - positionandhelp. jsp" %> 
<table class= "command - table" id= "tablel"> 





<tr> 
<td> 
<a href = "accounts - search. jsp" >< img src = "search. png"></a> 
<a href = "accounts - export. jsp”>< img src = "export. png"></a> 
</td> 
</tr> 
</table> 


<table class = "content ~ table" id= "table2"> 
<tr> 





<th width= "5 名 "> 序号 </th> 
<th width= "15 名 "> 用 户 账号 </th> 
<th width= "8#% "> 用 户 名 </th> 
<th width= "22 $% "> 部 门 </th> 
<th width= "10 名 "> 用 户 角 色 </th> 
<th width= "20s "> 用 户 权限 </th> 
<th colspan = "2"> 操 作 </th> 
</tr> 
<% 
String strSQLCount = "SELECT COUNT( * ) RS nums FROM useraccounts "; 
String strSQL = "SELECT UserAccount, UserRole, UserGroupList, TrueName, NickName,academy FROM 
useraccounts "; 
String istr, useraccount, useraccounthref, userrole, usergrouplist, truename, acadenmy, 
modihref, delehref; 
try{ 
rowscount = gs1. executeCount(strSQLCount); 
pagecount = (rowscount + numsperpage - 1) /numsperpage; 
// 页 码 的 有 效 范围 
if (pagenum <1) pagenum= 1; 
if (pagenum > pagecount) pagenum = pagecount; 
i= (pagenum - 1) * numsperpage + 1; 
if(rowscount!= 0){ 
TS = gsl.executeQueryList( strSQL, pagenum, numsperpage); 
while(rs. next()){ 
istr=""+i; 
useraccount = rs.getString("UserAccount"); 
useraccounthref = "< a href = 'accounts - detail. jsp? useraccount =" + 
useraccount + "'>" + useraccount + "</a>"; 
userrole = rs.getString("UserRole"); 
usergrouplist = rs.getString("UserGroupList"); 
truename = rs.getString("TrueName"); 
academy = rs.getString("academy"); 


modihref = "<a href = 'accounts - modify. jsp?useraccount =" + useraccount + " 
&page = ”+ pagenum + "> 修改 </a>"; 
delehref = "<a href = 'accounts - delete. jsp?useraccount = ”+ useraccount + " 


&page= ”+ pagenum + "&appmodule = accounts - listpage. jsp'" 
+ " onclick = \"{ifE(confirm(' 确 定 要 删除 该 账户 信息 吗 ?')){return trve;} 
return false;}\"" 
+ " target = 'mainFrame'> 删 除 </a>"; 
("管理 员 ". equals (myuserrole)) 
{ 
modihref = "修改 "; 
delehref =“" 删 除 "; 


> 

®tr 
<td><% = istr%></td> 
<td><% = useraccounthref %></td> 
<td><% = truename %></td> 
<td><% = academy %></td> 
<td><% = userrole %></td> 
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<td><% = usergrouplist %></td> 
<td><% =modihref %></td> 
<td><% = delehref %></td> 
</tr> 
< 和 


i++; 
} //end while 

} //end if 
} //end try 
catch( Exception ex){ 

//out. print(ex.getMessage()); 
} 
finally{ 

rs=null; 

gsl. disconnectToDB( ) ; 
} 
%S> 
</table> 
<form name = "mygo" method= "post" action= "accounts - listpage.jsp"> 
<%@ include file= "pubpro/pagebottom - changepage. jsp" %> 
</form> 
<div id = "table4" style= "display:none;"> 
<table class = "frame — table" align= "center"> 





<tr height = "50px"><th> 系 统 提示 </th></tr> 
> 
< td> 系 统 中 尚未 有 账号 信息 !</td> 
</tr> 
<tr height = "50px"> 
<th> 


<a href = "useraccount - add. jsp"> 添 加 账号 </a> | 
<a href ="#"> 批 量 导 和 </a> 
</th> 
</tr> 
</table> 
</div> 
</body > 
</html > 
<% 
if (rowscount == 0) 
{ 
%> 
< script type = "text/javascript"> 
document. getElementById( "tablel" ) . style.display = "none"; 
document. getElementById( "table2"). style. display 
document. getElementById( "table3"). style. display 
document. getElementById( "table4"). style.display = "block"; 
</script > 
<S% 
} 
%> 





在 上 述 分 页 浏览 页 面 中 ,包含 了 两 个 独立 的 . jsp 文件 ,一 个 文件 为 pagetop- 
positionandhelp.jsp, 用 于 显示 页 面 当 前 的 位 置 和 帮助 信息 ,在 列表 上 方 显示 。 另 一 个 文件 
为 pagebottom-changepage. jsp ,为 分 页 显示 列表 下 面 的 分 页 控制 。 代 码 清单 如 下 : 

(1) pagetop-positionandhelp.jsp 文件 清单 


<%(@ page language = "java" pageFEncoding = "GBK" %> 
<table class= "location- table"> 
<tr height = "35"> 
<td class = " location -title" > 您 的 位 置 : <% = strposition%> 
< span style = "cursor:pointer;" onclick = "showorhidediv( 'helpdiv')"> 
<% = strfunction%></span> 
</td> 
</tr> 
</table> 
<div id = "helpdiv" style= "display:none;"> 
<table class = "location - help" width= "100% " cellpadding = "0" cellspacing = "0" > 
<tr height = "20"> 
<td align = "left"> 系 统 帮 助 : </td> 
<td width = "30"> 
<a href ="#" onclick ="showorhidediv('helpdiv')">X</a> 
</td> 
</tr> 
<tr height = "20"> 
<tdalign="left"><% = strhelpwords% ></td> 
</tr> 
</table> 
</div> 
< script type= "text/javascript"> 
function showorhidediv( strid){ 
$ ("#"+strid). toggle(); 
} 
</script> 


(2) pagebottom-changepage. jsp 文件 清单 


<% @ page language = "java" pageEncoding = "GBK" %> 
<table class = "content - table" id = "table3"> 
<tr height = 40 > 
<th width="100% ”colspan= "15" align= "center"> 
第 <% = pagenum% > 页 共 <% = pagecount %> 页 
<%if(pagenum >1){%> 
<a href = "#" onclick = "fgopage(1)"> 第 一 页 </a> 
<a href ="#" onclick = "fgopage(<% = pagenum- 1%>)"> 上 一 页 </a> 
<%}if(pagenum< pagecount){%> 
<a href ="#" onclick = "fgopage(<% = pagenum+ 1%>)"> 下 一 页 </a> 
<a href =" 井 ”onclick = "fgopage(<% = pagecount %>) "> 最 后 一 页 </a> 
<%}%> 
< input type = "text" name = "gopage" value= "0"> 
< input type = "hidden" name = "page" value= "0"> 
< input type = "submit" value = " 转 到 " class = "button" /> 
</th> 
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</tr> 

</table> 

< script type = "text/javascript"> 

function fgopage(pagenum){ 
document. mygo. page. value = pagenum; 
document. mygo. submit( ); 

} 

</script > 


需要 特别 说 明 的 是 ,在 MyEclipse 环境 中 ,对 于 上 述 三 个 JSP 页 面 ,在 编译 时 显示 被 包 
含 的 两 个 文件 中 的 变量 不 能 解析 ,这 是 因为 MyEclipse 对 文件 单独 编译 ,并 不 能 确定 谁 会 调 
用 这 两 个 文件 ,而 它们 中 使 用 的 变量 是 在 调用 该 文件 的 文件 中 定义 的 ,因此 在 pagebottom- 
changepage. jsp 文件 编译 时 显示 类 似 pagecount connot be resolved to a varibles 错 。 在 浏 
览 器 中 真正 地 显示 主页 面 时 ,这 种 错误 将 不 会 出 现 。 

上 述 代码 演示 了 数据 库 在 JSP 中 的 简单 分 页 浏览 ,页面 中 引用 了 用 户 自 定义 的 样式 表 
CSS 文件 ,具体 内 容 见 第 3 章 , 定 义 了 一 组 关于 <table > 和 <td > 标记 的 样式 类 。 使 用 样式 类 
来 规范 Web 页 面 的 显示 是 良好 的 习惯 。 

在 浏览 器 中 ,运行 accounts-listpage. jsp 页 面 ,显示 结果 如 图 6-17 所 示 。 


DD lecalhost8080/Dpentai x 
€ 3 © BD localhost8080/OpenLabplatform/accounts-listpage.jsp 


您 的 位 置 : 系统 用 户 账号 管理 > > 账号 列表 
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图 6-17 数据 库 浏览 列表 界面 
上 述 界 面 是 我 们 在 许多 的 Web 应 用 中 见 到 的 用 户 界 面 。 在 表格 中 的 每 一 项 的 后 面 都 
有 一 个 "删除 ? 超 链 接 , 单 击 该 超 链接 ,可 以 删除 当前 记录 。 对 应 该 超 链接 的 代码 是 : 


<a href = "useraccounts - delete. jsp?id=<% = id%>" 
onclick = "{if(confirm( ' 确 定 要 删除 吗 ?') ){return true; }return false;j"> 删 除 </a> 


在 超 链接 标记 <a > 中 ,如 果 包 含 onclick 事件 属性 , 则 单 击 超 链接 时 ,首先 执行 onclick 


对 应 的 函数 ,如 果 函 数 返回 true, 则 接 下 来 转 到 href 设置 的 页 面 ,如 果 函 数 返 回 false, 则 不 
转 到 href 指定 的 页 面 。 
删除 记录 对 应 的 useraccounts-delete. jsp 页 面 , 代 码 清 单 如 下 : 


<%@ page contentType = "text/html;charset = GBK" %> 
<%(@ page import = "java. sql. * "%> 
< 外 四 page import = "java. text. x " %> 
<jsp:useBean id= "gsl" class = "pub. haodbgs]l" scope = "page"/> 
<% 
String id = request. getParameter("id"); 
String page = request. getParameter("page"); 
if(id==null) id = ""; 
String sqlString = "DELETE FROM useraccounts WHERE id = '"+id.trim()+""'"; 
try { 
gsl. executeUpdate( sqlString); 
}catch( Exception ex) { 
out. print (ex. getMessage( ) ); 
}finally{ 
gsl. disconnectToDB( ); 


response. sendRedirect("useraccounts - listpage. jsp?page = "+ page); 
} 
%> 


删除 记录 页 面 是 一 个 纯粹 的 JSP 程序 ,没有 要 显示 的 内 容 , 删除 成 功 后 , 转 回 
useraccounts-listpage. jsp 页 面 , 即 可 看 到 记录 被 删除 的 结果 ,产生 页 面 刷新 效果 。 在 使 用 
response. sendRedirectCurl) 命 令 的 时 候 , 如 果 url 中 可 以 包含 参数 ,由 于 HTTP 中 文 编码 问 
题 ,中 文 参数 将 不 能 正确 传送 ,可 以 通过 session 和 application 来 传递 。 

在 书写 SQL 命令 串 时 ,特别 是 SQL 中 关键 字 之 间 的 空格 容易 忽视 ,书写 格式 一 定 要 清 
晰 ,以 便于 阅读 和 修改 ,例如 ,修改 记录 的 SQL 命令 可 以 书写 为 ， 

String strSQL = "UPDATE useraccounts SET " 

"RuthorNane=N' + 珍妮 +"'，" 
"Email = '" + jane@sdu.edu.cn + "', " 


+ 
+ "MobilTel ='" + 135xxxx5123 + "'" 
+ "WHERE UserID='" + jane + "ni 


FS 


在 执行 修改 命令 以 前 ,可 以 用 下 面 的 语句 来 显示 上 述 的 SQL 命令 串 是 否 正确 : 


out.println( strSQL + "< br >"); 


6.6 综合 举例 


在 Web 系统 的 开发 过 程 中 ,虽然 每 个 系统 的 业务 领域 可 能 不 同 ,但 许多 业务 模块 的 程 
序 实现 是 相似 的 。 本 节选 取 了 作者 在 项 目 研发 中 遇 到 的 一 些 公共 功能 模块 作为 例子 进行 讲 
解 ,一 则 是 为 了 练习 已 学 的 知识 ,其 次 则 是 为 了 避免 为 了 举例 而 举例 ,增强 内 容 的 实用 性 。 
来 自 于 项 目 研发 中 的 例子 ,不 仅 能 更 好 地 讲解 所 学 的 书本 知识 ,还 可 以 将 这 些 例子 代码 应 用 
到 实际 项 目的 研发 中 ,为 以 后 的 项 目 研发 提供 借鉴 和 帮助 。 
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6.6.1 文件 上 传 操 作 


在 许多 Web 应 用 中 ,都 会 用 到 文件 和 文件 夹 操 作 , 例 如 : 论文 管理 ,作业 提交 等 。 在 基 
于 Java 的 技术 中 ,有 关 文 件 和 文件 夹 的 操作 被 封装 在 java. io 包 中 ,下 面 我 们 举例 说 明 JSP 
中 文件 ( 夹 ) 的 创建 .删除 以 及 文件 的 复制 等 操作 的 实现 。 

【 例 6-17】 有 一 新 闻 公告 发 布 页 面 ,页 面 中 允许 用 户 上 传 附 件 文件 ,并 规定 附件 文件 
的 类 型 ,上 传 的 附件 数量 不 限 ,在 整个 新 闻 公告 确定 发 布 前 ,可 以 删除 已 经 上 传 的 附件 。 编 
写 相应 的 JSP 代码 ,实现 文件 上 传 功能 。 

分 析 : 由 于 可 以 上 传 多 个 文件 ,并 且 在 新 闻 公 告 确认 发 布 前 ,允许 删除 上 传 的 附件 , 因 
此 该 页 面 还 应 该 提供 一 个 显示 上 传 附件 的 目标 iframe, 作 为 form 表单 的 target 输出 。 界 面 
设计 如 图 6-18 所 示 。 
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图 6-18 ”新 建新 闻 公 告 界面 











在 上 述 界面 设计 中 ,在 “上 传 文件 ”区域 ,每 次 上 传 一 个 文件 ,需要 输入 附件 标题 , 单 击 
“浏览 ”按钮 ,选择 上 传 的 文件 ,然后 单 击 * 上 传 ”按钮 , 则 将 文件 上 传 到 Web 服务 器 ,此 时 在 
下 面 的 文本 框 ,显示 上 传 的 文件 列表 。 重 复 执行 上 述 过 程 ,可 以 上 传 多 个 附件 。 

在 上 传 区 域 文件 列表 中 ,每 个 上 传 的 文件 后 面 都 显示 一 个 “删除 ” 超 链 接 , 单 击 该 超 链 
接 , 上 传 的 文件 将 从 服务 器 上 删除 。 

实现 上 述 功能 ,需要 三 个 JSP 文件 ,一 个 是 客户 端 form 页 面 ,一 个 是 Web 服务 器 端 保 
存 文件 页 面 , 还 有 一 个 页 面 负责 删除 上 传 的 文件 。 

(1) 客户 端 文件 上 传 表单 页 面 news-add. jsp 

从 上 述 的 页 面 设计 可 见 , 由 于 要 实现 多 个 附件 的 文件 上 传 ,因此 文件 上 传 是 一 个 表单 。 
但 是 ,新 建 一 个 新 闻 公 告 ,还 包含 了 许多 其 他 信息 .例如 : 标题 .正文 等 ,这些 信息 需要 通过 


另外 的 表单 来 提交 。 本 处 只 介绍 涉及 文件 上 传 的 代码 部 分 。 
代码 清单 : news-add. jsp 文件 上 传 界面 核心 代码 


<%@ page language = "java" pageEncoding = "GBK" %> 
<! DOCTYPE html > 
<html > 
<head> 
< script type = "text/javascript"> 
function form2submit () 
{ 
// 附 件 标题 验证 
var tmpstr = document. form2. showaddfiletitle. value; 
if (tmpstr =="") 
{ 
alert ("附件 标 题 不 能 为 空 !"); 
document. form2. showaddfiletitle. focus(); 
return false; 
} 
if ((tmpstr. indexOf("&")>= 0) || (tmpstr. indexOf("#")>= 0)) 
{ 
alert ("附件 标题 不 能 包含 ?.&、$ 、! 、; 、# 等 字符 "); 
document. form2. showaddfiletitle. focus(); 
return false; 
} 
if (document. form2. showaddfile. value == "" 
{ 
alert(" 请 先 选择 文件 "); 
document. form2. showaddfile. focus( ); 
return false; 


} 


// 获 取 filelistbox 数据 帧 中 的 内 容 , 取 隐 藏 显示 的 附件 文件 列表 (以 字符 # 结束 ), 存 人 form2 


// 隐 藏 控件 , 随 文件 一 并 上 传 到 服务 器 端 , 将 新 上 传 的 文件 在 附件 列表 中 显示 


//var iframestr = document. filelistbox.document. body. innerText:; 


// 因 为 Google 浏览 器 不 能 读 取 未 显示 的 span 内 容 , 上 述 语句 只 有 在 王 中 结果 正确 ,在 Google 


// 中 iframestr 均 为 空 字 符 串 
var objlist = document. filelistbox.document.getElementsBYTagName("span" ) ; 


//getElementsByTagName 返回 一 个 对 象 数组 , 如 果 查 找 的 标记 不 存在 , 则 对 象 不 存在 , 数组 长 度 


为 0 
if (objlist. length== 0) iframestr= ""; 
else iframestr = objlist[0]. innerText; 
if (iframestr. length> 0) 


document. form2.addfilelist. value = iframestr. substring(0, iframestr. indexOf("#")); 


else 
document. form2. addfilelist.value = ""; 
document. form2 .addfiletitle. value = document. form2. showaddfiletitle. value; 
// 清 空 文本 框 ,以 便 上 传 下 一 个 附件 


document. form2. showaddfiletitle. value= ""; 
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// 提 交 form2 表单 
document. form2. submit( ); 
return true; 
} 
</script > 
</head> 
<body> 
<table> 
<form name = "form2" method = "POST" enctype = "multipart/form - data" action = "news 一 
addfilesave. jsp?delfileflag= 1" target = "filelistbox"> 
< input type = "hidden" name = "addfiletitle" value= ""> 
< input type = "hidden" name = "addfilelist" value =""> 
<tr height = "26"> 
< td > 附件 标 题 : < input type= "text" name = "showaddfiletitle"></td> 
</tr> 
<tr height = "26"> 
<td> 文 件 名 : < input type = "file" name = "showaddfile"> 
< input type= "button" value = "上传 "” onclick = "form2submit()"> 
</td> 
</tr> 
<tr> 
<td>< iframe name = "filelistbox" height = "100"></iframe ></td> 
</tr> 
</form> 
</table> 
</body> 
</html > 


文件 上 传 是 一 个 复杂 的 过 程 ,表单 < form > 包含 属性 enctype 二 "multipart/form-data"， 
form 表单 中 的 file 输入 控件 对 表单 要 上 传 的 文件 通过 enctype 二 "multipart/form-data" 解 
码 成 二 进 制 文件 ,通过 和 服务 端 程序 联合 工作 完成 文件 的 上 传 操作 。 

在 上 述 代 码 中 , 即 当 用 户 单 击 * 浏 览 ? 按 钮 时 ,打开 文件 选择 列表 ,选择 要 上 传 的 文件 , 单 
击 “ 上 传 ?按钮 ,执行 表单 提交 函数 form2submit() ,该 函数 将 获取 已 经 上 传 的 文件 列表 , 保 
存 到 一 个 隐藏 输入 域 , 与 本 次 上 传 的 文件 一 起 发 送 到 服务 器 端 , 此 时 调用 服务 端 程序 news- 
addfilesave. jsp ,运行 该 程序 ,保存 文件 并 显示 新 上 传 的 文件 。 

(2) 服务 端 表 单 处 理 程序 页 面 news-addfilesave. jsp 

当 单 击 "* 上 传 ”按钮 后 ,执行 form2. submit() 函数 , 即 提交 表单 form2。 在 服务 端 ,form2 
的 action 参数 指定 的 服务 器 处 理 程序 news-addfilesave. jsp 被 执行 ,进行 文件 上 传 处 理 。 

对 于 文件 上 传 操作 ,在 服务 端 Tomcat 本 身 不 能 接收 上 传 的 文件 数据 ,需要 通过 插件 来 
完成 ,常见 的 文件 上 传 /下 载 插件 是 jspsmartupload. jar 组 件 ?。 该 组 件 定义 了 com. 
jspsmart. upload 包 , 包含 了 多 个 有 关 文 件 操作 的 Java 类 , 即 File. class、 Files. class、 
Request. class 以 及 SmartUpload. class 和 SmartUploadException. class, 以 实现 服务 端的 文 
件 操作 。 该 组 件 为 免费 软件 ,可 从 网 上 搜索 下 载 . 下 载 时 可 以 留意 是 否 支 持 中 文 。 


@ jspSmartUpload 是 由 www. jspsmart. com 网 站 (该 网 站 已 经 关闭 ) 开 发 的 一 个 可 免费 使 用 的 全 功能 的 文件 上 传 
下 载 组 件 , 适 于 嵌入 执行 上 传 下 载 操作 的 JSP 文件 中 。 


在 MyEclipse 中 ,复制 jspsmartupload. jar 包 到 Web 工程 文件 夹 下 WEB-INF 目录 的 
lib 文件 夹 中 ,然后 在 jspsmartupload 节点 上 右 击 ,执行 Build Path->Add to Build Path 快捷 
菜单 命令 ,将 jspsmartupload. jar 添加 到 Tomcat 的 环境 变量 中 ,以 便于 定位 相关 的 类 文件 。 

文件 上 传 对 应 的 服务 端 脚本 程序 news-addfilesave. jsp 代码 清单 如 下 : 


< 外 @ page language = "java" import= "java. util. * " pageEncoding = "GBK" %> 





<%@ page import = "com. jspsmart. upload. * "%> 


< jsp:useBean id= "fileupload" scope ="page" class = "com. jspsmart. upload. SmartUpload" /> 


< jsp:useBean id= "mytime" scope = "page" class = "pub. mytime"/> 
< jsp:useBean id = "gb2312" scope = "page" class = "pub. ISOtoGb2312" /> 
<% 
String delfileflag = request. getParameter("delfileflag"); 
String addfiletitle= "",addfilelist= ""; 


String savefilepath, savefilename = "",extname = 


mm 
7 
String iframestr = 


String[ ] s1, s2; 


[区 


//jspsmartupload 类 初始 化 ,设置 允许 上 传 和 拒绝 上 传 的 文件 类 型 ,设置 允许 上 传 的 文件 大 小 


fileupload. initialize(pageContext); 


fileupload. setAllowedFilesList( "doc, DOC, docx, DOCX, ppt, PPT, rar, RAR" ) ; 


fileupload. setDeniedFilesList ("exe, bat, jsp" ); 
fileupload. setMaxFileSize(50000); 

// 上 传 文件 

fileupload. upload( ); 


//Save the files with their original names in a virtual path of the web server 


try { 
// 获 取 表单 数据 ,与 不 含 上 传 文件 控件 的 form 获取 方法 不 同 


Enumeration enumer = fileupload. getRequest().getParameterNames(); 


while( enumer. hasMoreElements()) 


{ 


String key= (String)enunmer. nextElement(); 


String[ ] values = fileupload. getRequest().getParameterValues(key); 


if(key. equals("addfiletitle")) 
{ 

addfiletitle= values[0]; 
} 
if(key. equals("addfilelist")) 
{ 

addfilelist = values[0]; 


} 

// 更 改 文 件 名 ,取得 当前 上 传 时 间 的 毫秒 数值 

Calendar calendar = Calendar. getInstance( ); 

savefilename = String.valueOf(calendar. getTimeInMillis()); 
// 保 存 上 传 文件 ,文件 路 径 已 经 建 好 ,取得 文件 的 大 小 


com. jspsmart. upload. File myFile = fileupload.getFiles().getFile(0); 


//filename = myFile. getFileNanme(); 
extname = myFile.getFileFxt(); 
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int file size= myFile.getSize(); 


savefilename += "." + extname; 

// 在 MyEclipse 开发 环境 中 ,getRealPath("") 返 回 站 点 根 物 理 路 径 中 包含 

// \.metadata\. me_tcat\webapps 

// 在 正式 Tomcat 环境 中 ,返回 站 点 根 的 物理 路 径 

//savefilepath= request. getRealPath(""); 

savefilepath = "D:\\HaoWorkspace\\OpenLabPlatform\\WebRoot\\datafiles\\news\\"; 
myFile. saveAs( savefilepath + savefilename, SmartUpload.SAVE PHYSICAL); 

// 输 出 附件 列表 , 即 一 个 HTML 页 面 ,页 面 中 # 以 前 部 分 是 页 面 间 传 递 数 据 

String fl = "\10"; 

String f2 = "\20"; 

String newfileitem = addfiletitle + fl + savefilename; 

addfilelist += newfileitem + f2; 

iframestr = addfilelist + "#"; 

// 输 出 addfilelist, 以 "#" 结 尾 的 串 ,该 输出 在 form2 的 target 参数 中 输出 

out. print("<body style = 'margin - top:0px;font ~ size:12px; line — height:150 % '>"); 
out. print("< span style = 'display:none;'>" + iframestr + "</span>"); 

// 在 ifrmae 中 输出 附加 文件 列表 ,用 户 可 以 及 时 看 到 上 传 的 附件 列表 

sl = addfilelist. split(f2); 

for (int i=0;i<sl.length;i++) 


} 





s2= sl[i]. split(f1); 

CT 

//addfilelist 参数 不 能 在 最 后 ,最 后 的 文件 分 隔 符 \10 不 能 保存 

out. print ("<a href = 'news - addfiledelete. jsp?addfilelist =" + addfilelist + " 
Sdelfilestr=" +sl[i] + "&delfileflag=" + delfileflag + "'>"); 

out. print("&times;"); 

out. print("</a>" + "< br >"); 


out. print ("</body >"); 


catch (Exception e) { 


} 
%> 


out.println("<b>Wrong selection : </b>" + e.toString()); 


在 上 述 代 码 中 ,服务 端的 输出 将 输出 到 客户 端 网 页 的 iframe 中 ,通过 输出 < span > 元 素 
来 保存 当前 的 上 传 文件 列表 ,以 便于 客户 端 网 页 获取 该 列表 ,并 赋 给 隐藏 的 form2 元 素 , 下 
次 再 上 传 给 服务 端 ,使 得 服务 端 能 够 显示 所 有 已 经 上 传 的 文件 列表 。 

在 Google Chrome 浏览 器 中 ,运行 该 网 页 ,结果 如 图 6-19 所 示 。 

说 明 : 对 于 <input type= "file"> 元 素 . IE 浏览 器 和 Chrome 浏览 器 显示 效果 不 同 。 
此 外 ,浏览 器 在 实现 JavaScript 时 也 不 完全 相同 ,Chrome 浏览 器 对 于 style 二 'display: 
none; ' 的 < span > 元 素 内 容 的 获取 方法 比 正 浏览 器 严格 ,在 news-add. jsp 中 ,通过 
getElementsByTagName("span") ; 的 方法 获取 ,以 保证 程序 兼容 不 同 的 浏览 器 。 最 后 ,就 
是 文件 编码 问题 ,在 JSP 文件 中 ,添加 JSP 指令 : 


<%(@ page language = "java" import = "java.util. * " pageEncoding = "GBK" %> 


以 保证 服务 端 获 取 的 表单 数据 中 中 文 不 出 现 乱 码 。 这 与 不 包含 文件 上 传 的 表单 提交 URL 











[1] 申请 书 :1479291352329 txt 区 


[2] 支撑 材料 :1479291384132_ txt 





图 6-19 文件 上 传 页 面 


参数 读 取 的 方法 不 同 。 

(3) 删除 上 传 文件 页 面 news-addfiledelete. jsp 

在 上 述 页 面 中 ,对 于 已 经 上 传 的 附件 ,列表 中 包含 一 个 删除 超 链接 ,对 应 删除 附件 程序 
news-addfiledelete. jsp, 代 码 清 单 如 下 : 


<% @ page language = "java" import = "java.util. * ”pageEncoding = "GBK" %> 

< 外 @ page import = "java. io. x "$%> 

< jsp:useBean id = "gb2312" scope = "page" class = "pub. ISOtoGb2312" /> 

< 和 

String addfilelist = gb2312. convert(request. getParameter("addfilelist")); 

String delfilestr = gb2312. convert(request.getParameter("delfilestr")); 

String delfileflag = request. getParameter("delfileflag"); 

String[ ] s1, s2; 

// 要 删除 的 文件 信息 

String fl = "\10"; 

String f2 = "\20"; 

sl= delfilestr. split(f1); 

String delfiletitle = sl[0]; 

String delfilename = sl[1]; 

// 求 要 删除 的 文件 对 应 的 串 在 总 的 串 中 的 位 置 

delfilestr = delfilestr + f2; 

int pos = addfilelist. indexOf(delfilestr); 

if (pos>-1) 

{ 

addfilelist = addfilelist. substring(0, pos) +addfilelist. substring(pos + delfilestr. length 

(0); 

} 

// 如 果 所 有 文件 被 删 空 

String iframestr; 第 

if (addfilelist. length()>0) 6 
章 





iframestr= addfilelist + "#"; 
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else 
iframestr="" 
// 输 出 新 的 addfilelist 
out. print("< body style = 'margin~ top:0px;font — size:12px; line ~— height :150 % >"); 
out. print("< span style= 'display:none;'>" + iframestr + "</span>"); 
// 显 示 新 的 文件 列表 , 如果 没有 附件 , 则 只 有 newscode, 以 便 可 以 添加 新 的 附件 
if (addfilelist. length()>0) 
{ 
sl=addfilelist. split(f£2); 
for (int i=0;i<sil.length;i++) 
{ 
s2= sl[i].split(f1); 
out, print("[” + (+ +"] "+ s2l0) t+":" 4a211]); 
out.print("<a style= 'color: #FF0000; text - decoration: none' title = ' 删 除 上 传 的 附件 ' 
href = 'news - addfiledelete. jsp?addfilelist =" + addfilelist + "gdelfilestr=" +sil[i] + " 
&delfileflag=" + delfileflag + "'>"); 
out.print("&times;"); 
out.print("</a>" + "<br>"); 
} 
} 
out. print("</body >" ); 
// 在 修改 操作 时 ,不 真正 地 删除 文件 ,只 有 "确认 "再 删除 ,此 时 从 物理 上 删除 文件 
if ("1".equals(delfileflag)) 
站 
String mypath = request. getRealPath(""); 
mypath = "D:\\HaoWorkspace\\OpenLabPlatform\\WebRoot" ; 
mypath += "\\datafiles\\news\\"; 
File f= new File(mypath, delfilename); 
if(f.exists()) 
{ 
f.delete(); // 删 除 文件 
} 
} 
%> 


在 表单 数据 的 提交 和 获取 URL 参数 时 ,使 用 JSP 内 置 对 象 request 方法 request. 
getParameter( "参数 或 变量 名 ")。 如 果 表 单 域 和 URL 参数 值 包含 中 文 ,在 服务 端 读 取 的 中 
文 数据 会 出 现 乱 码 。 这 是 因为 ,在 Tomcat 中 ,数据 传递 采用 默认 的 ISO8859-1 编码 方式 ， 
但 中 文系 统 下 浏览 器 的 缺 省 方式 是 以 UTF-8 提交 发 送 请 求 的 , 故 导 致 取 到 的 表单 数据 为 不 
能 识别 的 乱码 。 可 以 通过 编码 转换 为 中 文字 符 ,代码 如 下 : 


package pub; 
public class ISOtoGb2312 { 
public static String convert(String str) { 
if(str==null||str=="") 
return null; 
else{ 
try { 
byte bytesStr[] = str. getBYtes("ISO- 8859— 1"); 
return new String(bytesStr, "gb2312"); 


} catch (Exception ex) { 
return str; 

} 

} 


} 


文件 上 传 是 Web 开发 中 的 常用 功能 ,可 以 将 上 述 代 码 抽 取出 来 编写 一 个 公共 JSP 模 
块 , 供 其 他 JSP 页 面包 含 ,从 而 提高 系统 的 可 维护 性 。 对 应 文件 上 传 ,抽象 出 基本 的 接口 ， 
可 定义 一 组 JSP 页 面 ,包括 uploadfile-form. jsp( 定 义 文件 上 传 表单 )、uploadfile-save. jsp 
(保存 上 传 文件 ) .uploadfile-delete.jsp( 删 除 上 传 文件 )、uploadfile-cancel. jsp( 取 消 添加 、 修 
改 操作 ,删除 上 传 的 文件 或 放弃 对 文件 的 删除 )。 当 需要 在 一 个 JSP 页 面 中 包含 文件 上 传 
操作 时 ,在 网 页 中 的 需要 显示 上 传 表单 的 位 置 添加 下 列 代码 ; 

<% 


String filepath = "/datafile/learning resource/"; 
String filenamecode = useraccount; 


String moduleapp = "../role- tuanwei/learn ~ arrange— list.jsp"; 
String mytip = ""; 

%> 

<%@ include file="../pubpro/fileupload— form. jsp" %> 


其 中 ,filepath filenamecode 和 moduleapp 是 在 公共 模块 fileupload-form. jsp 中 用 到 的 
有 关 文 件 上 传 用 到 的 变量 。 以 隐藏 空间 的 方式 发 送 到 uploadfile-save. jsp 服务 器 页 面 ,以 
确定 上 传 文件 需要 保存 的 路 径 和 文件 命名 方式 。 


6.6.2 多 表单 数据 处 理 


在 图 6-18 中 ,我 们 已 经 看 到 ,实现 上 述 界 面 需要 多 个 表单 来 完成 ,上 一 节 介 绍 了 文件 上 
传 用 的 表单 ,下面 我 们 将 介绍 内 容 输入 表单 forml ,以 及 页 面 底 部 的 “确定 “取消 ”按钮 用 到 
的 全 部 数据 上 传 用 的 表单 form3 ,还 有 一 个 单独 用 于 “取消 ?按钮 的 表单 , 当 添加 操作 取消 
后 ,删除 已 经 上 传 的 附件 。 

1. CKeditor 在 线 编辑 器 及 其 应 用 

在 HTML 中 ,多 行文 本 框 textarea 元 素 只 能 输入 文本 ,在 使 用 中 限制 很 大 。 为 了 扩展 
输入 内 容 , 网 上 有 很 多 第 三 方 开 发 的 在 线 编辑 控件 ,采用 HTML 格式 ,支持 文本 、 格 式 化 以 
及 插入 图 片 和 表格 等 内 容 , 是 一 种 功能 强大 的 富 媒 体 编辑 器 .可 以 方便 地 集成 到 网 页 中 。 

在 网 页 在 线 编辑 组 件 中 ,使 用 非常 广泛 的 是 CKeditor? 在 线 编辑 控件 ,属于 开放 源 代 
码 的 所 见 即 所 得 文字 编辑 器 ,提供 JavaScript API, 可 以 很 容易 地 和 JavaScript、PHP、ASP、 
ASP. NET、Java 等 不 同 的 编程 语言 相 结合 ,并 兼容 大 多 数 网 页 浏览 器 。 

(1) 登录 CKeditor 官方 网 站 (http://ckeditor. com/) ,根据 需 要 选择 一 个 CKEditor 
package 下 载 ,不 同 的 包 其 工具 条 中 包含 的 工具 按钮 不 同 , 本 处 我 们 选择 下 载 的 CKEditor 
包 是 Basic Package, 下载 后 的 文件 为 ckeditor_4. 6. 0 _basic. zip。 解 压缩 该 文件 ,得 到 


@ ”CKeditor 在 线 编辑 器 是 FCKeditor 的 升级 版 ,名 称 中 的 "FCK" 是 该 编辑 器 作者 名 字 Frederico Caldeira Knabben 
的 缩写 。 
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ckeditor 文件 夹 ,包含 编辑 器 相关 的 文件 和 文件 夹 ,以 及 测试 ckeditor 安装 的 例子 。 

(2) 将 ckeditor 文件 夹 复制 到 站 点 根 目 录 下 。 复 制 该 文件 夹 ,在 MyEclipse 中 ,在 
WebRoot 节点 执行 粘贴 命令 ,将 ckeditor 添加 到 Web 项 目 中 。 然 后 在 浏览 器 中 输入 : 

http://localhost: 8080/OpenLabPlatform/ckeditor/samples/index. html 

测试 CKeditor 编辑 器 的 运行 情况 ,如果 安 装 成 功 , 在 该 页 面 可 以 进行 Toolbar 的 配置 。 
对 于 CKeditor Basic 包 ,包含 的 工具 组 有 clipboard basicstyles .paragraph .links 和 about。 
如 果 要 包含 插入 文件 .表格 等 内 容 , 需 要 安装 CKeditor 编辑 器 的 其 他 高 级 版 本 。 

(3) 将 CKeditor 集成 到 网 页 中 。CKEditor 是 一 个 JavaScript 应 用 程序 ,只 需要 在 网 页 
中 包含 一 个 文件 引用 即 可 加 载 。 设 ckeditor 安装 在 站 点 根 目 录 下 的 ckeditor 文件 夹 ,加 载 
ckeditor 的 HTML 代码 如 下 : 


如 果 已 经 将 CKEditor 安装 在 了 自己 网 站 的 ckeditor 目录 ,可 参照 如 下 示例 : 
<head> 

< script type= "text/javascript" src = "/ckeditor/ckeditor. js"></script > 
</head> 


用 上 述 方式 加 载 ,CKEditor JavaScript API 即 准备 就 绪 , 可 以 使 用 了 。 这 比 早期 的 
FCKeditor 版 本 要 方便 得 多 ,早期 版 本 需要 导入 一 组 Java 类 。 

(4) 创建 一 个 CKEditor 编辑 器 实例 。CKEditor 就 和 HTML 的 文本 区 域 (textarea) 一 
样 工作 ,不同 的 是 , 它 不 仅 提供 了 一 个 输入 区 域 , 还 提供 了 一 组 工具 按钮 ,可 以 对 输入 的 内 容 
格式 化 。 当 内 容 编辑 完成 后 ,CKEditor 仍然 是 使 用 一 个 文本 区 域 来 传递 它 的 数据 到 服务 器 
上 ,为 此 必须 在 网 页 中 创建 并 编辑 一 个 textarea 元 素 ,代码 如 下 : 


<textarea name = "editorl" rows = " 行 数 " cols = " 列 数 "></textarea> 


如 果 想 要 加 载 一 些 数 据 到 编辑 器 中 ,例如 从 数据 库 中 读 出 数据 ,只 需要 把 数据 放 在 文本 
区 域 (textarea) 内 就 可 以 了 。 在 这 个 例子 中 ,将 文本 区 域 (textarea) 命 名 为 “editorl1”。 当 提 
交 表单 数据 时 ,服务 器 端 脚本 程序 读 取 该 区 域 的 内 容 。 

接 下 来 要 将 ckeditor 编辑 器 和 上 面 的 textarea 关联 在 一 起 。 使 用 CKEditor Javascript 
API, 用 一 个 编辑 器 实例 来 替换 这 个 普通 的 文本 区 域 (textarea) ,加 入 如 下 一 段 JavaScript 代 
但 : 

< script type = "text/javascript"> 


CKEDITOR. replace( 'editor1l' ); 
</script > 


按照 上 述 操 作 , 编 辑 器 正如 一 个 文本 区 域 (textarea) 一 样 工 作 , 所 以 , 当 提 交 一 个 包含 一 
个 CKedditor 编辑 器 实例 的 表单 时 , 它 的 数据 也 将 是 很 简单 地 传递 ,服务 端 将 用 文本 区 域 
(textarea) 的 名 称 作 为 键 名 来 接收 CKeditor 编辑 区 域 的 数据 。 

如 果 在 客户 端 要 获取 CKeditor 数据 ,可 以 使 用 CKEditor API 获取 编辑 器 实例 中 的 内 
容 , 代 码 如 下 : 

< script type= "text/javascript"> 


var editor data = CKEDITOR. instances. editor1.getData( ) ; 
</script > 


下 面 是 一 个 包含 CKeditor 的 网 页 test 一 ckeditor. html ,代码 如 下 : 


<!DOCTYPE html > 
<html > 
<head> 
< meta name = "content - type" content = "text/htm1; charset = UTF - 8"> 
< script type= "text/javascript" src= "ckeditor/ckeditor.js"></script > 
</head> 
<body> 
<form method = "post" action= "test - ckeditorsave. jsp"> 
<p> 
CKEditor Basic Package:< br /> 
< textarea name = "editorl" rows = "7" cols= "30"> Initial value.</textarea> 
< script type = "text/javascript"> 
CKEDITOR. replace( 'editor1' ); 
</script > 
</p> 
<p>< input type= "submit" /></p> 
</form> 
</body > 
</html > 


在 浏览 器 中 打开 网 页 ,结果 如 图 6-20 所 示 。 


D) localhost:8080/Openlal x 
€ 3 © D localhost:8080/OpenLabPlatform/test-ckeditor.html 








CKEditor Basic Package: 
BIlEs :| 者 | 四 中 


JInitial value. 











图 6-20 CKeditor 富 文本 编辑 器 


(5) CKeditor 编辑 器 的 配置 ,使 用 ckeditor 编辑 器 ,通常 需要 对 编辑 器 的 外 观 进行 配 
置 。 配 置 文件 为 ckeditor/config.js, 配 置 的 项 目 很 多 ,包括 : 区 域 高 度 .宽度 设置 ,工具 条 的 
配置 ,图 片 和 表格 设置 等 ,详细 情况 请 阅读 ckeditor 配置 文件 config.js。 
在 一 个 Web 应 用 中 ,多 个 网 页 ,或 一 个 网 页 中 也 可 能 使 用 多 个 CKeditor 实例 ,不 同 的 
实例 配置 可 能 不 同 , 具 体 的 配置 方法 请 大 家 参考 CKeditor 编辑 器 配置 的 相关 文献 。 第 
1. 内 容 编 辑 用 表单 forml 定义 6 
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用 CKeditor 编辑 器 ,相关 代码 如 下 : 
代码 清单 : news-add. jsp 中 forml 表单 定义 界面 核心 代码 


< form name = "forml"> 
<tr height = "40"> 
<td class = "table topic" colspan = "2" 六 添加 新 闻 公 告 ]</td> 
</tr> 
<tr height = "26"> 
<td class = "table_cell" width= "10% "> 信息 类 型 : </td> 
<td class= "table cell" align= "left"> 
< select name = "newstype" disabled> 
<option value = "新 闻 ”selected > 新 闻 </option> 
<option value = "公告 " > 公告 </option> 
</select> 
</td> 
</tr> 
<tr height = "26"> 
<td class = "table cell" align = "right"> 标 题 : </td> 
<td class = "table cell" align= "left"> 
< input name = "newstitle" type= "text" size = "90" maxlength= "100"> 
</td> 
</tr> 
<tr> 
<td class = "table_cel1" align = "center"> 详 < br > 细 <br > 内 <br > 容 </td> 
<td class = "table cell" align = "left"> 
< textarea name = "newscontent" rows = "7" cols = "30"> 详 细 内 容 </textarea> 
< script type = "text/javascript"> 
CKEDITOR. replace( 'newscontent' ); 
</script > 
</td> 
</tr> 
</form> 


在 forml 中 ,没有 表单 提交 按钮 ,forml 没有 设置 action 属性 ,其 表单 数据 将 被 赋值 到 
后 面 的 表单 form99 的 隐藏 输入 域 ,并 通过 页 面 底部 的 form99 表单 中 的 “提交 ”按钮 统一 提 
交 , 如 果 单 独 提交 ,将 出 现 程序 运行 不 稳定 的 错误 ,也 就 是 说 .有 时 候 数据 提交 成 功 , 有 时 候 
会 失败 。 

2. 表单 form99 定义 及 多 表单 数据 的 提交 

在 网 页 中 ,还 有 第 三 个 表单 form99, 该 表单 只 包含 “确定 ”和 “取消 ”按钮 ,其 目的 是 实现 
整个 页 面 中 所 有 表单 数据 的 统一 提交 或 放弃 。 表 单 form99 定义 及 核心 代码 如 下 。 

代码 清单 : news-add. jsp 中 form99 表单 定义 界面 核心 代码 

<form name = "form99" method= "post" action= "news - addsave. jsp"> 

<tr height = "30"> 

<td class= "table cell”" colspan= "2" align = "center"> 
< input type = "button" value = " 提 交 " class = "mybutton" onclick = "form99Submit()"> gnbsp; 
< input type = "button" value= " 取 消 " class = "mybutton" onclick= "formCancel()"> 


</td> 
</tr> 


< input type = "hidden" name = "newstitle" value =""> 

< input type = "hidden" name = "newscontent”value = ""> 

< input type = "hidden" name = " addfilelist" value= "" 

</form > 

< form name = "formcancel" action= "news - addcancel. jsp?" method = "post"> 
< input type = "hidden" name = "addfilelist" value= ""> 

</form> 





在 form99 中 ,定义 了 多 个 hidden 元 素 ,目的 是 将 forml 和 form2 表单 数据 复制 到 
form99 中 ,通过 form99 一 并 提交 。 此 外 ,我 们 还 定义 了 一 个 formcancel 表单 ,对 应 “取消 ” 
按钮 。 单 击 “ 提 交 ” 按 钮 ,执行 form99Submit() 函 数 ,对 应 的 客户 端 脚本 程序 如 下 。 

代码 清单 : news-add. jsp 中 form99 表单 提交 核心 代码 

AMAA 

// 表 单 forml 数据 有 效 性 验证 


function formlDataValid( ) 


{ 
if (document. form1. newstitle. value =="") 
alert(" 信 息 标题 不 能 为 空 !"); 
document. form1. newstitle. focus(); 
return false; 
} 
if (document. form1. newscontent. value == "") 
{ 
alert(" 信 息 内 容 不 能 为 空 !"); 
return false; 
} 
return true; 
} 


L777771111111111111171171111111111711711111111111111111111111111111111111111111111111/ 
// 将 forml、form2 的 数据 复制 到 form99 的 hidden 元 素 , 提交 表单 form99 
function form99Submit( ) 
{ 
if (!formlDataValid( )) 
return false; 
//(1) 将 forml 中 的 所 有 disable 输入 元 素 取消 disable, 以 便于 数据 提交 
var len = document. forml.elements. length; 
Var 1; 
for (i=0;i<len;i++) { 
document. form1. elements[i].disabled = false; 
} 
//(2) 取 form2 表单 数据 , 即 iframe 中 的 文件 列表 ,存储 已 有 的 附件 信息 
var iframestr = document.filelistbox. document.body. innerText; 
if (iframestr. length>0) { 
document. form99. addfilelist. value = iframestr. substring(0, iframestr. indexOf("#")); 
} 
document. form99. submit(); 
} 
L7171711111111111111111111111111111111111111111111111111111111111111111111111111111/ 
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//form3 "取消 "按钮 处 理 函 数 ,调用 formcancel. submit(), 进 而 调用 formCancel 的 action 
function formCancel() 
{ 
var iframestr = document. filelistbox. document. body. innerText; 
document. formcancel. addfilelist. value = iframestr. substring(0, iframestr. indexOf("#")); 
document. formcancel. submit( ); 


} 


在 form99 中 定义 了 多 个 hidden 元 素 , 目 的 是 将 forml 和 form2 表单 数据 复制 到 form3 
中 ,通过 form3 一 并 提交 。 如 果 forml 中 的 CKeditor 数据 获取 不 方便 ,可 以 将 其 他 表单 数 
据 复制 到 forml ,通过 forml 提交 , 即 单 击 “ 确 定 ” 按 钮 时 ,执行 document. forml. submit()。 

此 外 ,我 们 还 定义 了 一 个 formcancel 表单 ,对 应 添加 操作 的 "取消 ”按钮 。 所 谓 取消 ,就 
是 要 删除 通过 form2 已 经 上 传 到 服务 器 上 的 文件 ,这 由 formcancel 表单 中 action 属性 中 所 
设 定 的 服务 端 程序 来 完成 。 

3. 表单 数据 的 保存 

当 单 击 表单 form99 的 “提交 ”按钮 后 ,执行 action 属性 中 设 定 的 服务 端 脚本 news- 
addsave. jsp, 读 取 用 户 的 表单 输入 数据 ,并 存储 到 相应 的 数据 表 中 。 部 分 核心 代码 清单 
如 下 : 

代码 清单 (news-addsave. jsp) 


<%(@ page contentType = "text/html;charset = GBK" %> 

<%@ include file="../session— confirm. jsp" %> 

< 外 四 page import = "java. sql. * "%> 

<jsp:useBean id = "gb2312" scope = "page" class= "pub.ISOtoGb2312" /> 

<jsp:useBean id= "gslpub" scope= "page" class = "pub. dbdbgsl" /> 

<%! 

int retval; 

%> 

<% 

String newstitle = gb2312. convert (request. getParameter("newstitle")); 

String newscontent = gb2312. convert (request. getParameter( "newscontent")); 

String addfilelist = gb2312. convert(request. getParameter ("addfilelist")); 

// 将 Text 文本 转换 成 HTML 格式 存储 到 数据 库 中 

newscontent = newScontent.trim( ); 

String strSQL; 

StrSQL = "INSERT INTO news(NewsCode, NewsTitle, NewsContent, AddfileList, NewsDate) VALUES(" 
"'"+ newscode 

™',N'" + newstitle 
"',N'" + newscontent 
"',N'"” + addfilelist 


二 
’ 


+ 
+ 
+ 
+ 
+ + newsdate 
+ 
try{ 
retval = gslpub. executeUpdate( strSQL); 

} catch (Exception ex){ 

out. print (ex. getMessage( )); 
} finally { 

gslpub. disconnectToDB( ); 


} 
%> 
<% 
if (retval ==1) 
{ 
%S> 
<html> 
<head> 
<meta HTTP — EQUIV = "Content - Type" content = "text/html; charset = gb2312"> 
</head> 
<body> 
<table width= "60 当 "border = "1" cellpadding = "0" cellspacing = "0"> 
<tr height = "40"> < td> 信 息 添加 成 功 </td></tr> 
<tr height = "77"> 
<td> 您 已 经 成 功 添加 了 信息 : <% = newstitle%></td></tr> 
<tr height = "30"> <td >[<a href = "news - add. jsp"> 继 续 添加 </a>]</td></tr> 
</table> 
</body > 
</html > 
<% 
} 


机 > 

在 上 述 代 码 中 ,用 到 了 几 个 JavaBean, 其 中 ISOtoGb2312 负责 汉字 编码 的 转换 ， 
txtFilter 用 于 将 文本 中 HTML 使 用 的 保留 符号 (例如 “<”*>” 等 ) 进 行 转换 ,避免 在 浏览 器 
中 输出 这 些 符号 时 与 HTML 标记 出 现 解析 错误 ,具体 代码 介绍 这 里 略 。 


6.7 Web 系统 设计 与 开发 


从 Web 知识 的 学 习 到 知识 应 用 和 系统 研发 还 有 很 大 的 一 段 距离 。 在 本 书 的 最 后 ,我 们 
从 软件 工程 的 角度 ,对 Web 系统 研发 给 出 一 个 研发 框架 ,并 对 每 一 个 研发 阶段 的 工作 和 文 
档 做 简要 的 说 明 。 由 于 本 书 篇 幅 的 限制 ,我 们 不 再 给 出 具体 的 应 用 案例 代码 ,只 给 出 Web 
系统 开发 中 应 遵循 的 指导 性 规范 。 


6.7.1 用 户 需求 分 析 


任何 系统 的 开发 都 是 从 用 户 需求 开始 的 ,这 是 系统 研发 的 第 一 步 。 用 户 根 据 工 作 需 要 ， 
提出 研发 信息 系统 的 需求 ,并 且 有 一 个 初步 的 目标 ,然后 寻找 系统 开发 方 。 系 统 开发 方 先 初 
步 了 解 用 户 的 想法 ,商讨 系统 研发 的 商业 问题 ,达成 一 致意 见 后 ,进入 用 户 需 求 分 析 阶 段 。 
所 谓 用 户 需求 分 析 ,就 是 开发 方 与 用 户 共同 工作 .对 用 户 的 需求 进行 详细 的 调研 ,整理 ,使 得 
双方 对 系统 所 实现 的 功能 有 一 个 共同 的 理解 , 它 是 整个 开发 工作 的 基础 。 

用 户 需求 分 析 过 程 的 结果 是 要 编写 系统 用 户 需求 分 析 报 告 , 它 是 项 目 设 计 、 编 码 ` 测 试 、 
验收 的 依据 ,编写 目的 是 定义 所 要 开发 系统 的 开发 目标 ,包含 系统 功能 的 规定 和 性 能 要 求 ， 
指出 预期 的 系统 用 户 、 系 统 运行 环境 以 及 对 用 户 操 作 的 约定 ,为 系统 设计 和 开发 提供 依据 ， 
作为 系统 功能 追溯 的 基础 和 系统 开发 量 确定 的 蓝本 ; 同时 该 报告 可 以 保证 软件 开发 的 质 
量 、 需 求 的 完整 与 可 追溯 性 ,保证 业务 需求 提出 者 与 需求 分 析 人 员 、 开 发 人 员 ,测试 人 员 及 其 
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他 相关 人 员 对 需求 达成 共识 。 

用 户 需求 报告 主要 包括 以 下 章节 : 

(1) 引言 ,包括 : 编写 目的 ,项 目 背景 ,读者 对 象 与 参考 建议 ,术语 定义 和 参考 资料 等 
内 容 。 
(2) 项 目 概述 ,包括 : 相关 系统 描述 ,系统 功能 ( 按 当前 组 织 部 门 ) ,系统 用 户 ,开发 环境 
(操作 系统 ,数据 库 系统 ,开发 工具 ,网 络 环 境 ) ,项 目 约束 .系统 特点 等 。 

(3) 业务 需求 概要 描述 ,包括 : 企业 组 织 结构 (各 部 门 主要 业务 职能 ) ,业务 流程 分 析 
( 按 部 门 ) ,业务 接口 , 现 有 系统 分 析 等 。 

(4) 业务 需求 功能 分 析 ,业务 需求 分 析 是 在 各 部 门 业务 需求 概要 描述 基础 上 ,从 软件 设 
计 的 视角 对 部 门 业务 的 进一步 分 析 , 包 括 : 业务 功能 描述 、 用 例 图 、 业 务 流程 图 \ 数 据 项 描述 
几 个 部 分 ,是 进行 系统 概要 设计 和 数据 库 设计 的 基础 。 

(5) 非 功能 性 需求 ,包括 : 性 能 需求 ,设计 约束 ,数据 管理 能 力 ,故障 处 理 ,其 他 需要 (可 
靠 性 ,安全 性 ,可 维护 性 ,可 扩展 性 ,灵活 性 ) 。 

(6) 运行 环境 规定 ,包括 : 设备 (服务 器 ,网 络 设备 ) ,支撑 环境 等 。 

在 系统 调研 的 各 个 阶段 ,调研 人 员 通 常 采用 纸 笔记 录 模 式 , 这 种 传统 的 模式 麻烦 、 不 便 
于 使 用 , 且 效 率 低下 。 现 在 ,人 们 常常 借助 于 一 些 快速 文档 和 图 形 绘制 工具 ,例如 Xmind 思 
维 导 图 ?绘制 工具 帮助 调研 人 员 来 理解 用 户 的 需求 。 

例如 ,在 分 析 用 户 对 系统 灵活 性 要 求 时 ,将 用 户 的 需求 用 思维 导 图 的 形式 表达 出 来 ,可 
便于 和 用 户 的 沟通 与 交流 ,相应 的 思维 导 图 如 图 6-21 所 示 。 
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图 6-21 系统 灵活 性 用 户 需求 


在 需求 分 析 阶 段 ,通常 设计 各 种 访问 提纲 ,对 用 户 业 务 中 发 生 的 数据 表格 要 及 时 收集 、 
编号 作为 原始 文档 。 整 个 文档 编写 完成 后 ,需要 召开 评审 会 ,对 文档 内 容 进行 严格 评审 , 开 
发 方 和 用 户 认可 后 双方 所 有 参与 人 员 签 字 ,以 便 进 入 下 一 阶段 。 


6.7.2 系统 概要 设计 


当 用 户 需求 分 析 报 告 写作 完成 ,并 通过 评审 后 ,意味 着 开发 方 和 用 户 对 系统 研发 目标 、 
系统 功能 要 求 初步 达成 了 一 致 , 接 下 来 就 是 系统 的 概要 设计 了 。 所 谓 概要 设计 ,就 是 基于 系 
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四 思维 导 图 又 叫 心智 图 ,最 初 由 世界 著名 心理 学 家 教育 学 家 ,英国 人 东 尼 “。 博 赞 (Tony Buzan) 于 20 世纪 60 年 代 
提出 ,是 表达 发 散 性 思维 有 效 的 图 形 思 维 工 具 。 它 从 一 个 中 央 关 键 词 或 想法 (中 心 主题 ) 开 始 ,用 辐射 线形 连接 的 方式 ， 
把 各 级 主题 (分 支 主题 ) 的 关系 用 相互 隶属 与 相关 的 层级 图 表现 出 来 。 思 维 导 图 运用 图 文 并 重 的 方法 ,把 主题 关键 词 与 
图 像 .颜色 等 建立 记忆 链接 ,在 记忆 、 学 习 、. 思 考 等 思维 活动 中 广泛 应 用 。 


统 用 户 需 求 分 析 报 告 ,对 系统 的 层次 划分 、 功 能 模块 .数据 结构 、 接 口 以 及 出 错 处 理 进行 概要 
性 设计 ,目的 是 为 下 一 步 的 数据 库 设 计 、 产 品 设计 和 系统 编码 提供 依据 ,以 及 为 测试 人 员 提 
供 参 考 , 本 阶段 的 任务 是 编写 系统 概要 设计 报告 。 

系统 概要 设计 报告 主要 包括 以 下 章节 : 

(1) 引言 ,包括 : 编写 目的 ,项 目 背景 ,读者 对 象 与 参考 建议 ,术语 定义 和 参考 资料 等 
内 容 。 
(2) 总 体 设计 ,包括 : 设计 原则 和 设计 要 求 ( 命 名 原则 、 模 块 独立 性 原则 .边界 设计 原 
则 .数据库 设 计 原 则 安全 保密 原则 灵活 性 原则 )、 系统 逻辑 设计 (功能 模块 结构 .系统 组 织 
设计 、 接 口 )、 系 统 软件 实现 设计 (软件 层次 、 软 件 模块 .开发 环境 .运行 环境 ) 等 。 

(3) 系统 功能 模块 设计 ,在 用 户 需 求 分 析 报告 基础 上 ,根据 系统 逻辑 设计 原则 ,对 系统 
的 每 个 功能 模块 进行 设计 和 描述 。 为 下 一 步 的 产品 设计 以 及 系统 编码 提供 依据 。 该 章 内 容 
很 多 ,以 功能 模块 为 主线 ,对 功能 模块 中 的 每 一 项 功能 进行 描述 ,主要 包括 以 下 几 个 方面 : 
功能 描述 输入 项 ,输出 项 、 主 要 流程 .依赖 关系 、 关 键 技 术 接口。 

(4) 系统 数据 结构 设计 , 逮 辑 结构 设计 及 命名 规范 ,物理 结构 设计 ,数据 结构 与 程序 
的 关系 (定义 数据 类 、 操 作 权 限 以 及 与 各 模块 的 关系 ), 数 据 字 典 设计 ,数据 操作 权限 设 
计 等 。 

(5) 安全 保密 设计 ,用 户 角 色 与 权限 管理 ,数据 库 访 问 控制 (支持 多 应 用 开发 ) ,系统 网 
络 安全 设计 。 

(6) 出 错 处 理 设计 ,描述 系统 发 生 外 界 及 内 在 错误 时 ,所 提供 的 错误 信息 及 处 理 方 法 ， 
包括 系统 出 错 处 理 表 及 维护 处 理 过 程 表 。 给 出 有 关 出 错 处 理 的 产生 原因 、 提 示 信 息 以 及 建 
议 处 理 方法 。 当 系统 由 多 个 子 系统 (模块 ) 组 成 时 ,每 个 子 系统 分 别 使 用 一 张 系统 出 错 处 理 
表 进 行 描述 。 

(7) 运行 与 维护 ,维护 方面 主要 是 对 服务 器 上 的 数据 库 数据 进行 维护 。 可 使 用 数据 库 
系统 维护 功能 机 制 。 

(8) 进度 计划 ,根据 系统 用 户 需 求 分 析 , 项 目 整 体 工期 ,系统 各 子 系统 、 各 功能 模块 、 人 
员 配 备 及 开发 计划 ,制订 系统 开发 的 时 间 规 划 表 。 

在 功能 设计 中 ,我 们 可 以 把 一 个 系统 的 功能 分 为 公共 功能 和 业务 功能 两 个 大 的 方面 ,其 
中 ,公共 功能 是 为 了 保证 系统 的 运行 和 部 署 而 设计 的 , 它 对 于 系统 开发 更 加 重要 ,可 以 看 作 
是 系统 开发 的 框架 ,是 系统 灵活 性 和 二 次 开发 的 技术 保证 。 

在 公共 功能 中 ,最 主要 的 有 : 

(1) 单位 组 织 机 构 管 理 , 添 加 组 织 机 构 ,指派 该 机 构 的 业务 .指派 部 门 管理 员 ,负责 该 部 
门 内 员工 岗位 的 设 定 , 包 括 功能 项 和 数据 项 操作 权限 。 

(2) 数据 字典 管理 ,定义 系统 中 数据 类 和 数据 项 ,操作 权限 (添加 、 修 改 、 删 除 、 查 询 、 上 
报 、 审 核 , 归 档 、 导 入 、 导 出 )。 

(3) 用 户 角 色 与 权限 管理 ,定义 系统 中 的 用 户 角 色 ,为 角色 指派 用 户 权限 。 

(4) 用 户 账户 管理 ,添加 用 户 账户 ,指派 用 户 角色 。 

当 概 要 设计 完成 后 ,召开 评审 会 ,通过 后 进入 数据 库 设计 和 产品 设计 阶段 ,两 者 也 可 以 
称 为 系统 详细 设计 。 
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6.7.3 数据 库 设计 


从 概念 上 讲 ,任何 计算 机 系统 都 是 对 数据 的 处 理 , 数 据 的 处 理 可 分 为 两 个 方面 ,一 种 是 
程序 本 身 负责 数据 的 管理 ,例如 Word、Excel 以 及 Photoshop 等 应 用 程序 ,它们 的 数据 都 是 
以 文件 的 方式 组 织 和 管理 的 。 第 二 种 方式 就 是 采用 数据 库 系统 ,这 通常 是 一 些 大 的 管理 系 
统 采用 的 数据 管理 模式 ,可 以 有 效 地 保证 程序 与 数据 的 分 离 . 也 可 以 提高 数据 管理 的 效率 ， 
使 系统 专注 于 业务 流程 的 实现 ,而 不 是 数据 的 存储 与 管理 。 

在 整个 产品 的 研发 周期 ,数据 库 设 计 通 常 需要 借助 于 PowerDesigner 等 相关 数据 库 
设计 工具 ,例如 : 为 支持 上 面 系统 灵活 性 要 求 , 可 以 设计 相关 的 数据 表 , 利 用 PowerDesigner 
设计 的 系统 灵活 性 相关 实体 概念 数据 模型 如 图 6-22 所 示 。 
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图 6-22 系统 灵活 性 需求 相关 概念 数据 模型 设计 


数据 库 设计 的 任务 是 根据 系统 概要 设计 中 的 数据 结构 设计 ,建立 概念 数据 模型 ,分析 实 
体 、 属 性 和 联系 ,设计 物理 数据 模型 ,最 后 生成 相应 的 物理 数据 库 ,编写 系统 数据 库 设 计 说 明 
书 , 主 要 包括 以 下 几 个 部 分 : 

(1) 引言 ,包括 : 编写 目的 ,项 目 背 景 ,读者 对 象 与 参考 建议 ,术语 定义 和 参考 资料 等 
内 容 。 
(2) 数据 库 系 统 运行 环境 ,包括 : Web 服务 器 ,应 用 服务 器 和 数据 库 服务 器 。 

(3) 系统 数据 库 设 计 , 包 括 : 数据 库 设计 概述 (设计 原则 与 要 求 ,数据 库 设计 数据 对 象 


四 ”PowerDesigner 是 一 种 数据 建 模 工具 ,由 Sybase 开发 ,包含 的 模型 有 : 概念 数据 模型 (Conceptual Data Model) 、 
人 逻辑 数据 模型 (Logical Data Model) .物理 数据 模型 (Physical Data Model) ` 面 向 对 象 模型 (Object Oriented Model) ,用例 
图 (Use Case Digram) 以 及 业务 流程 模型 (BPM) 等。 通过 物理 模型 可 以 直接 生成 SQL 指令 ,创建 具体 数据 库 管 理 系统 下 
的 数据 库 。 


信息 模型 数据 命名 规范 ) ,逻辑 设计 ,物理 设计 ,数据 表 清 单 . 数 据 字 典 , 存 储 过 程 ,数据 与 程 
序 的 关系 (系统 数据 类 及 主要 操作 ) 。 

(4) 安全 性 设计 ,数据库 访问 控制 ,用 户 账户 与 操作 权限 等 。 

(5) 数据 库 管理 与 维护 ,系统 安装 与 配置 ,优化 ,系统 备份 ,系统 恢复 等 。 

在 该 阶段 ,对 于 数据 表 、 数 据 项 的 命名 规则 至 关 重 要 , 它 直 接 影响 着 未 来 代码 的 可 读 性 
和 可 维护 性 。 当 数据 库 设 计 说 明 书 完成 后 ,召开 评审 会 . 它 是 下 一 步 系统 编码 的 重要 依据 。 


6.7.4 产品 设计 


在 系统 概要 基础 上 ,可 以 同时 进行 的 设计 是 数据 库 设计 和 产品 设计 ,这 在 传统 的 软件 工 
程 中 , 称 为 详细 设计 。 产 品 设 计 的 目的 是 根据 功能 设计 ,对 每 一 个 功能 设计 其 对 应 用 户 操 作 
界面 , 它 是 编码 人 员 编 程 的 依据 ,用 户 对 未 来 的 系统 也 有 一 个 相对 直观 的 认识 。 

产品 设计 阶段 要 编写 系统 产品 设计 报告 ,该 报告 的 内 容 相对 简单 ,可 以 以 功能 模块 为 主 
线 ,组 织 文档 内 容 , 可 以 使 用 Excel 等 工具 ,来 布局 页 面 中 的 内 容 , 或 者 用 Word 表格 的 形式 
来 组 织 和 布局 。 其 目的 就 是 让 编程 人 员 看 到 每 一 个 功能 的 用 户 界面 是 什么 样子 的 。 

产品 设计 完成 后 ,需要 与 用 户 讨论 ,用 户 可 以 对 界面 布局 提出 自己 的 意见 ,设计 要 最 大 
程度 地 做 到 界面 简洁 、 业 务 流程 清晰 、 操 作 简 单 。 

在 产品 设计 阶段 ,还 要 根据 概要 设计 中 文件 名 的 命名 规范 ,在 页 面 上 标明 原 程序 文件 的 
名 称 , 以 便于 问题 的 描述 。 最 后 对 产品 设计 报告 进行 评审 ,通过 后 ,进入 系统 编码 阶段 。 


6.7.5 系统 编码 


当 数 据 库 设计 说 明 书 和 系统 产品 设计 完成 后 . 接 下 来 就 可 以 进行 系统 编码 了 。 在 该 阶 
段 ,要 搭建 开发 环境 ,这 包括 版 本 控制 环境 以 及 编程 人 员 自 己 的 编码 调试 环境 。 相 对 于 系统 
设计 ,程序 编码 是 相对 简单 的 ,但 是 ,编写 高 质量 的 程序 代码 同样 需要 高 超 的 技术 。 

从 概念 上 讲 ,软件 系统 都 是 对 数据 的 处 理 , 所 谓 不 同 的 系统 ,只 是 业务 不 同 。 为 提高 整 
个 系统 的 编程 效率 ,开发 初期 ,可 以 对 一 些 公共 模块 集中 讨论 ,最 后 确定 一 组 公共 模板 , 供 项 
目 组 成 员 使 用 和 参考 。 例 如 : 用 户 账户 管理 是 所 有 系统 都 具有 的 功能 , 它 是 对 用 户 账户 数 
据 的 管理 和 维护 ,因此 ,可 以 定义 一 个 标准 模块 ,包括 : 

。 useraccounts-add( 添 加 账户 ); 

。 useraccounts-delete( 删 除 账户 ); 

。 useraccounts-modi( 修 改 账户 ); 

。 useraccounts-search( 查 找 账户 ); 

。 useraccounts-list( 账 户 列表 ); 

。 useraccounts-listpage( 账 户 分 页 列表 ); 

。 useraccounts-detail( 账 户 详情 ); 

。 useraccounts-inport( 导 和 账户 ); 

。 useraccounts-export( 导 出 账户 ) 。 

在 Web 中 ,表单 页 面 通常 还 有 对 应 的 服务 端 处 理 页 面 .例如 添加 账户 后 ,在 服务 端 有 数 
据 库 操作 页 面 ,可 命名 为 useraccounts-addsave.jsp, 这 样 的 前 级 命名 ,保证 了 同一 类 数据 处 
理 程序 页 面 是 连续 的 ,便于 系统 的 维护 ,这 也 是 系统 设计 中 编码 规则 要 求 的 。 
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编码 过 程 中 ,还 会 遇 到 大 量 的 调试 ,这 与 编程 经 验 直接 相关 , 随 着 编码 量 的 增加 和 经 验 
的 积累 ,编程 效率 会 显著 提高 。 在 Web 开发 中 ,在 实现 功能 的 同时 ,对 数据 的 有 效 性 ,浏览 
器 的 兼容 性 要 不 断 地 测试 ,以 保证 系统 有 更 大 的 适应 性 。 


6.7.6 系统 测试 


在 软件 项 目 开发 完成 后 ,要 进行 详细 的 系统 测试 , 方 能 上 线 运 行 。 进 行 系统 测试 ,需要 
编写 详细 的 测试 报告 ,主要 包括 以 下 内 容 : 

(1) 概述 ,包括 : 项 目 背 景 ,测试 情况 (测试 时 间 、 环 境 、 工 具 、 范 围 . 人员) 等。 

(2) 单元 测试 ,单元 测试 又 称 模块 测试 ,是 针对 软件 设计 的 最 小 单位 程序 模块 进行 正确 
性 检验 的 测试 工作 。 单 元 测试 是 指 程序 员 完 成 一 个 模块 的 开发 后 ,在 与 其 他 模块 进行 合并 
之 前 所 要 进行 的 所 有 测试 工作 , 它 包 括 对 这 个 模块 内 部 各 个 小 模块 小 小 模块 直到 程序 基本 
单元 的 测试 工作 。 

在 程序 开发 之 前 ,软件 开发 负责 人 先 对 如 何 进行 单元 测试 做 一 个 规划 ,可 以 大 大 提高 单 
元 测试 的 质量 。 单 元 测试 的 规划 可 以 从 以 下 几 个 方面 来 考虑 : 单元 测试 的 内 容 , 单 元 测试 
方法 ( 桌 前 检查 ,交叉 阅读 ,代码 走 查 , 白 盒 测试 , 黑 盒 测试 

(3) 系统 功能 测试 ,对 每 一 个 功能 单元 进行 测试 ,根据 系统 设计 报告 ,对 系统 各 功能 模 
块 进行 全 面 的 测试 。 测 试用 例 设计 全 面 反 映 系统 功能 ,测试 在 各 种 输入 数据 正常 和 边界 情 
况 下 系统 的 运行 情况 。 填 写 测试 情况 列表 ,包括 : 测试 项 目 、 操 作 或 数据 、 预 期 结果 、 是 否 

(4) 非 功能 性 需求 测试 ,是 对 系统 功能 性 需求 以 外 的 情况 进行 的 测试 ,包括 : 安装 /外 
载 ,性 能 ,强度 ,恢复 ,可 用 性 ,安全 性 等 。 

(5) 测试 总 结 ,测试 是 一 个 长 期 的 过 程 ,包括 编码 前 的 测试 计划 ,编码 过 程 中 的 代码 走 
查 , 以 及 编码 完成 后 的 功能 测试 ,最 后 给 出 一 个 全 面 总 结 ,并 对 测试 结果 进行 分 析 。 

(6) 结论 ,最 后 是 对 系统 测试 结果 的 结论 ,由 开发 方 和 用 户 共 同 签字 认可 ,完成 整个 系 
统 的 开发 。 

系统 测试 通过 后 ,上 线 试 运行 ,在 没有 问题 的 情况 下 ,切换 到 系统 上 线 运行 状态 。 在 系 
统 上 线 运行 后 ,在 项 目的 整个 生命 周期 中 ,进入 运行 维护 状态 。 不 管 我 们 的 设计 、 开 发 和 测 
试 多 么 细致 ,系统 上 线 运行 后 ,发 现 问 题 是 非常 正常 的 。 或 者 在 运行 中 , 随 着 时 间 的 推移 ,用 
户 的 业务 发 生变 化 .需要 对 系统 进行 修改 ,这 都 是 非常 正常 的 。 我们 相信 ,一 个 好 的 软件 系 
统 都 是 用 出 来 的 ,是 在 应 用 过 程 中 的 不 断 改进 和 优化 ,是 用 户 和 开发 人 员 共 同 劳动 的 智慧 


[a 
结晶 。 


本 章 小 结 


在 Web 开发 中 ,服务 端 编程 是 B/S 结构 中 最 复杂 的 内 容 , 它 不 仅 要 实现 用 户 的 业务 逻 
辑 , 还 包含 了 大 量 的 数据 库 操作 ,还 必须 保证 数据 库 操作 的 效率 和 安全 性 。 本 章 讲解 了 
Java 程序 设计 基础 以 及 JSP 技术 两 个 方面 ,首先 概要 性 地 介绍 了 Java 程序 设计 中 涉及 的 概 
念 ,为 JSP 编程 做 好 概念 上 的 铺垫 。 在 JSP 技术 中 ,以 任务 驱动 的 方式 ,讲解 了 服务 端 开发 
中 遇 到 的 共性 问题 及 解决 办 法 ,包括 : JSP 中 的 数据 类 型 及 其 转换 、 数 组 ,文件 操作 、JSP 内 


置 对 象 JSP 中 的 参数 传递 方法 以 及 JDBC 与 数据 库 编程 。 这 些 内 容 都 是 每 一 个 Web 应 用 
中 都 可 能 遇 到 的 ,在 讲解 中 给 出 了 许多 实用 的 代码 和 JavaBean 类 ,这 些 代 码 都 来 源 于 我 们 
的 研发 项 目 ,读者 可 以 直接 应 用 在 自己 的 项 目 开 发 中 。 最 后 ,对 Web 系统 的 开发 流程 和 相 
关 文 档 .工具 进行 了 介绍 。 


习 题 


~、 简 答题 

1. 在 Web 系统 开发 中 ,可 能 使 用 不 同 的 代码 编辑 工具 ,例如 MyEclipse,SublimeText 
或 Windows 记事 本 程序 等 ,用 这 些 编辑 工具 编写 的 网 页 在 编辑 时 中 文 显示 正常 ,在 浏览 器 
打开 时 ,有 时 候 显 示 中 文 乱码 ,为 什么 ? 

2. 为 什么 说 Java 是 一 种 完全 面向 对 象 的 程序 设计 语言 ? 

3. 在 面向 对 象 技术 中 ,回答 如 下 问题 : 

(1) 什么 是 类 ? 什么 是 对 象 ? 简 述 它们 之 间 的 关系 。 

(2) 创建 一 个 对 象 有 哪些 方法 ? 

(3) 什么 是 类 的 构造 函数 ?构造 函数 的 一 般 功 能 是 什么 ? 

4. 说 明 Web 应 用 中 的 三 层 体系 结构 ,并 说 明 它 的 优势 。 

5. 在 JSP 页面 中 ,说 明 下 列 三 条 page 指令 的 功能 。 

<%@ page contentType = "text/html;charset = utf - 8" pageEncoding = "GBK" %> 


<%@ page import = "java. util.Date" %> 
<%(@ page session= "true" %> 


6. 在 JSP 中 ,有 哪些 常用 的 内 置 对 象 ? 并 简要 说 明 它们 的 功能 。 

7. 在 JSP 中 ,在 <%1...%> 中 声明 变量 和 在 <%...%> 中 声明 变量 有 何不 同 ? 

8. 在 字符 串 对 象 的 操作 中 ,使 用 equals() 方 法 判断 两 个 字符 串 相 等 时 ,如 何 使 用 ,为 什 
么 ? 使 用 trim() 方 法 来 操作 一 个 字符 串 变 量 时 ,如 果 发 生 异 常 ,为 什么 ”如 何 修改 ? 

9. 在 JSP 中 ,有 一 个 表单 输入 页 面 myinput. htm, 对 应 的 表单 处 理 页 面 为 myinputsave. 
jsp, 如 何在 myinputsave.jsp 中 获取 用 户 输入 ? 

10. 在 Web 应 用 中 ,页 面 之 间 的 参数 传递 有 哪些 常用 的 方法 ? 

11. 针对 Web 应 用 系统 开发 ,回答 下 列 问题 : 

(1) Web 开发 分 为 哪 几 个 阶段 ,每 个 阶段 的 主要 工作 是 什么 ? 

(2) 如 何 理 解 系统 的 可 扩展 性 、 可 维护 性 和 灵活 性 ? 

(3) 在 系统 功能 设计 中 ,不 仅 要 实现 用 户 的 业务 需求 ,同时 ,保证 系统 的 灵活 性 是 非常 
重要 的 。 为 此 ,在 Web 系统 公共 功能 设计 中 ,包括 4 个 方面 的 功能 : 组 织 机 构 管理 ,数据 字 
典 管理 ,用 户 账户 与 权限 分 配 ,账号 管理 ,它们 如 何 保证 系统 的 灵活 性 ? 

二 、 编程 题 

1. 用 户 注册 是 大 多 数 Web 系统 共有 的 功能 ,设计 一 个 新 用 户 注 册 功 能 ,要 求 : 

(1) 注册 界面 采用 htm 页 面 ,完成 客户 端的 数据 有 效 性 验证 。 

(2) 在 用 户 账户 文本 框 后 面 ,设计 “检查 用 户 名 是 否 可 用 ” 超 链接 ,采用 AJAX 技术 编写 
相应 的 服务 端 数据 库 检 测 程序 ,检查 完毕 后 .应 显示 账户 是 否 可 用 的 信息 。 
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2. 编写 一 个 简单 的 作业 提交 系统 ,该 系统 具备 以 下 简单 功能 : 

(1) 用 户 注 册 功 能 ,允许 新 用 户 注册 。 

(2) 作业 提交 功能 , 当 用 户 首次 登录 后 ,在 作业 数据 目录 homework 下 建立 一 个 以 用 户 
账户 命名 的 子 文件 夹 ,存储 该 用 户 提交 的 作业 。 

(3) 作业 管理 功能 ,用 户 可 以 查看 自己 提交 的 作业 ,删除 已 经 提交 的 作业 ,或 者 重新 提 
交 作 业 。 

3. 写 一 个 有 关 文件 和 文件 夹 操作 的 JavaBean, 封 装 常用 的 文件 和 文件 夹 (目录 ) 操 作 ， 
例如 新 建文 件 夹 .新 建文 件 .删除 文件 ,删除 文件 夹 里 面 的 所 有 文件 .删除 文件 夹 、 复 制 单个 
文件 .复制 整个 文件 夹 内 容 .移动 文件 到 指定 目录 移动 文件 夹 到 指定 目录 。 

4. 在 Web 系统 中 ,数据 浏览 . 导 和 人 导出、 打印 等 是 许多 系统 的 共有 功能 ,编程 实现 下 列 
功能 : 

(1) 任意 设计 一 个 数据 表 , 分 页 显示 数据 库 数据 表 数 据 记 录 。 

(2) 编程 实现 将 数据 表 导 出 为 Excel 表格 。 

(3) 编程 实现 页 面 的 打印 ,以 及 生成 Word 文档 和 PDF 文档 。 

5. 使 用 数据 库 技 术 和 JSP 开发 一 个 简单 的 留言 板 系统 。 
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